Angular Material Table flex 版本中的列宽答案

【问题标题】：Width of columns in Angular Material Table flex versionAngular Material Table flex 版本中的列宽
【发布时间】：2021-04-29 15:39:22
【问题描述】：

我正在使用带有 display: flex 变体的 Angular Material Table 组件，这意味着该表格将使用 flex-box 而不是常规表格呈现。调整表格列的宽度需要做什么？

来自官方页面的示例。

<mat-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> User name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.username}} </mat-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>
</mat-table>

【问题讨论】：

标签： css angular flexbox angular-material

【解决方案1】：

一种方法是使用 Angular Material mat-column-{name of column} 提供给您的类来调整宽度。

.mat-column-username {
  /* Meaning it will be fixed at 50px. */
  flex: 0 0 50px;

  /* or this if you want the column to auto-adjust to the width of the table */
  flex: 1 0 50px;
}

【讨论】：

【解决方案2】：

您需要使用 ngClass 为每列分配一个最大宽度。

在 CSS 文件中：

.lap-c-w-email {
    max-width: 30%;
}

在 HTML 文件中：

电子邮件 {{row.email}}

如果你也想格式化其他字段，你可以使用相同的类型来设置最大宽度。

但请记住，总最大宽度要保持在 100% 以避免水平滚动。

【讨论】：