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

Posted 2023-03-05

【中文标题】为啥“width: auto”属性对 Angular mat-table 元素没有影响？

【英文标题】：Why does the "width: auto" property have no effect on the Angular mat-table element?为什么“width: auto”属性对 Angular mat-table 元素没有影响？

【发布时间】：2021-07-05 18:56:50

【问题描述】：

我正在使用 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 的样式，使其只占用与其中的数据一样多的空间？

【参考方案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 等功能或具有可自行调整大小的列 根据他们的内容。

【讨论】：

谢谢，但你的例子不是我所拥有的。您正在使用“mat-table”、“mat-cell”和“mat-row”类，但我将它们用作标签（元素）。

哦，我有点慢。你的意思是说我应该使用类而不是标签？

我在帖子中添加了一个编辑以便更清楚 - 使用 而不是 时，您不能让列根据内容调整大小。