如何使mat-table中mat-cell与对应mat-header-row宽度匹配？

要让<mat-table>的表头列和对应单元格宽度统一为该列内容的最大宽度，直接调整表格布局和样式即可，以下是具体方案：

1. 切换表格布局模式 #

Angular Material Table默认使用table-layout: fixed固定布局，这会导致列宽无法根据内容自动适配。给表格添加自定义类并修改布局：

/* 在全局样式或组件样式中添加 */
.auto-fit-table {
  table-layout: auto !important;
  width: auto !important;
}

然后在模板中给<mat-table>应用这个类：

<mat-table class="auto-fit-table" [dataSource]="dataSource">
  <!-- 列定义 -->
</mat-table>

table-layout: auto会让浏览器根据列内的最大内容宽度自动计算列宽，width: auto确保表格整体宽度由内容决定，而非强制占满容器。

2. 统一表头与单元格的文本换行规则 #

为了让列宽计算更准确，避免内容换行导致宽度偏差，给表头单元格和数据单元格设置一致的文本处理样式：

.auto-fit-table mat-header-cell,
.auto-fit-table mat-cell {
  white-space: nowrap; /* 禁止内容换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 内容过长时显示省略号，可选 */
}

3. 处理数据缺失的空单元格 #

如果某列存在大量空值，空单元格的宽度会被压缩，导致表头与单元格宽度不匹配。可以给空值单元格添加占位符：

<mat-cell *matCellDef="let element">
  {{ element.targetColumn || '&nbsp;' }}
</mat-cell>

用非断空格( )占位，保证空单元格至少有基础宽度，避免整列被过度压缩。

4. 进阶：手动指定特定列宽度 #

如果某些列需要固定宽度，或者自动布局不符合预期，可以给对应列的表头和单元格添加固定宽度类：

<ng-container matColumnDef="fixedColumn">
  <mat-header-cell *matHeaderCellDef class="fixed-col"> 固定宽度列 </mat-header-cell>
  <mat-cell *matCellDef="let element" class="fixed-col"> {{ element.fixedColumn }} </mat-cell>
</ng-container>

.fixed-col {
  width: 180px; /* 根据需求调整 */
}

内容的提问来源于stack exchange，提问作者Marco Ottina Almaviva SpA