为什么“width: auto”属性对 Angular mat-table 元素没有影响？

Question

我正在使用 Angular 9。我有一个简单的三列垫表 ...

<mat-table *ngIf="!isMobile" #table [dataSource]="dataSource">
    <ng-container matColumnDef="time">
      <mat-header-cell *matHeaderCellDef> Time </mat-header-cell>
      <mat-cell *matCellDef="let article_stat">{{ getTime(article_stat) }} m</mat-cell>
    </ng-container>

    <ng-container matColumnDef="score">
      <mat-header-cell *matHeaderCellDef> score </mat-header-cell>
      <mat-cell *matCellDef="let article_stat">
        {{ getscore(article_stat) }} ({{ getWeightedscore(article_stat) }}) 
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="article">
      <mat-header-cell *matHeaderCellDef> Article </mat-header-cell>
      <mat-cell *matCellDef="let article_stat">
        <a href='{{ article_stat.article.path }}'>{{ article_stat.article.title }}</a>
      </mat-cell>
    </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="getRowClass(row)"></mat-row>
</mat-table>

下面是我的组件的简单 CSS。应用组件级别没有 CSS ...

.mat-table {
    width: auto;
}

.rising {
    font-weight: bold;
}

但是，当我的表格被渲染时，它占据了 100% 的屏幕，尽管事实上每列中的数据并没有占用那么多空间。如果我将宽度更改为固定像素宽度（例如“200px”），浏览器会尊重 wdith。为什么“宽度：自动”不起作用？如何设置 mat-table 的样式，使其只占用与其中的数据一样多的空间？

Answer 1

我查看了来自 Angular 的关于“mat-table”的文档。

在给出的示例中，他们使用了表格元素，表格开始标签中包含“mat-table”：

HTML

<table mat-table [dataSource]="dataSource">

CSS：

table {
  width: auto;
}

我已经测试了 width: auto; 的 css，它按预期工作 - 这是直接从 Angular documentation 中提取并在 stackbliz 中测试的。你可以查看我的工作测试here。

编辑： 更清楚地说，在上面列出的文档页面的底部，有一条说明使用 Tables with display: flex（<mat-table> 而不是 <table mat-table>）。

请注意，这种方法意味着您不能包含某些本机表 具有 colspan/rowspan 等功能或具有可自行调整大小的列 根据他们的内容。