Css 为什么"；宽度：自动“；属性对角垫表元素没有影响？

我用的是角度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>

---

然而，当呈现我的表时，它会占据100%的屏幕，尽管事实上每列中的数据并不占用那么多空间。如果我将宽度更改为固定像素宽度（例如“200px”），浏览器将尊重wdith。为什么“宽度：自动”不起作用？我如何设计我的垫表，使其只占用与其中数据相同的空间？

我已经从“垫表”查看了文档

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

HTML

我已经测试了

width:auto的css并且它按照预期工作-这是从角度直接拉出来的，并在stackbliz中测试。您可以查看我的工作测试

编辑：
更清楚的是，在上面列出的文档页面的底部有一个关于使用带有显示的
表格的说明：flex
（
而不是
）

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

谢谢，但你的例子和我的不太一样。您正在使用“mat table”、“mat cell”和“mat row”类，但我将它们用作标记（元素）。哦，我有点慢。你的意思是说我应该使用类而不是标签？为了更清楚，我在帖子中添加了一个编辑-当使用而不是标签时，你不能让列根据内容调整大小。
.mat-table {
    width: auto;
}

.rising {
    font-weight: bold;
}

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

table {
  width: auto;
}