Angular Material表格列宽设置无效，请求排查问题原因

我正在使用Angular Material表格，尝试为部分列固定宽度，相关代码如下：

<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-对应字段名格式设置列宽，但该格式始终不生效，请问我哪里操作有误？

• 样式优先级不足：Angular组件样式默认有封装机制，组件内的自定义样式可能被Material的内置样式覆盖。可以通过提升选择器权重解决，比如：

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

  若临时测试，也可添加!important（不推荐长期使用）：

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

• 缺少列渲染核心代码：你的模板中没有添加mat-header-row和mat-row指令，这是Angular Material表格渲染列的必要步骤，缺失的话.mat-column-xxx类不会被自动添加到单元格上。需要补充：

  1. 在组件类中定义列名数组：

     displayedColumns: string[] = ['email', 'name'];
     

  2. 在模板的mat-table标签内添加行渲染代码：

     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     

• 表格布局特性限制：Material表格默认用flex布局，仅设置width可能不生效，可同时设置最小/最大宽度强制固定：

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

内容的提问来源于stack exchange，提问作者Diksha