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

Question

我正在使用 Angular 9。我有一个简单的 mat-table 三列 ...

<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;
}

然而，当我的 table 被渲染时，它占据了 100% 的屏幕，尽管事实上每列中的数据并没有占据那么多 space。如果我将宽度更改为固定像素宽度（例如“200px”），浏览器会尊重 wdith。为什么“width: auto”不工作，我如何设计我的 mat-table 使其只占用与其中数据一样多的 space？

Answer 1

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

在给定的示例中，他们使用 table 元素，在 table 标签的开头包含“mat-table”：

HTML

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

CSS:

table {
  width: auto;
}

我已经测试了 width: auto; 的 css 并且它按预期工作 - 这是直接从 Angular documentation and tested in stackbliz. You can view my working test here.

中提取的

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

Note that this approach means you cannot include certain native-table features such colspan/rowspan or have columns that resize themselves based on their content.