修复 Angular Material Table 中的列宽

Question

我正在使用 Angular 材料表并尝试修复几列的宽度，如下所示：

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

 <ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef class="myHeader"> No. </mat-header-cell>
  <mat-cell *matCellDef="let element" > {{element.email}} </mat-cell>
 </ng-container>

 <ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef class="myHeader"> Name </mat-header-cell>
  <mat-cell *matCellDef="let element" > {{element.name}} </mat-cell>
 </ng-container>

</mat-table>

在CSS中：

table {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mat-column-email{
  width: 150px;
}

我在某处读到我们可以通过使用这种格式来修复列宽：

.mat-column-matColumnDef(Field name) {
 //CSS
 }

但无论如何，上述格式似乎都不起作用。谁能帮我解决我做错了什么吗？

Answer 1

在尝试了很多事情之后，以下解决方案对我有用：

  .mat-column-email{
       max-width: 60px !important;
       min-width: 60px !important;
    }

因此，不要设置宽度，而是设置该列的最大宽度和最小宽度。