如何实现Angular Material表格指定列头内容右对齐

在使用mat-table组件时，需要为指定列头设置text-align: right实现右对齐：

• 全局给th.mat-header-cell设置右对齐会影响所有列，不符合需求
• 使用nth-child按索引选择列头的方式维护成本高，调整列顺序、新增/删除列时必须同步修改CSS
• 期望能直接通过matColumnDef定义的列名选中对应表头，不依赖列的位置索引

方案1：使用框架自动生成的列专属类（推荐） #

Angular Material 表格会自动为每一列的表头、单元格生成和列名绑定的CSS类，命名规则为mat-column-[你的matColumnDef值]，这个类直接挂载在对应的<th>和<td>元素上，完全不依赖列的排列顺序。

比如你定义的matColumnDef="position"列，对应的表头元素会自动带上mat-column-position类，直接编写如下CSS即可：

/* 仅选中position列的表头设置右对齐 */
th.mat-header-cell.mat-column-position {
  text-align: right;
}

/* 如果需要让该列的表头和单元格都右对齐，可以直接写 */
/*
.mat-column-position {
  text-align: right;
}
*/

只要不修改matColumnDef的属性值，后续调整列顺序、新增/删除其他列都不会影响这个样式的生效，维护成本极低。

方案2：给表头手动添加自定义类 #

如果需要给多列复用同一样式，也可以直接在<th mat-header-cell>标签上手动添加自定义类名，实现更灵活的样式控制：

<!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef class="align-right"> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

<!-- 其他需要右对齐的列，直接加同一个class即可 -->
<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef class="align-right"> Weight </th>
  <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

对应CSS：

th.align-right {
  text-align: right;
}

你之前设想的th.mat-header-cell['position']属性选择器无法生效，原因是matColumnDef="position"是写在外层<ng-container>上的，内部的<th>元素本身不存在position属性，无法直接通过属性选择器匹配。而框架自动生成的mat-column-*类就是官方提供的、专门用于按列名自定义样式的标准入口，符合组件设计规范。

内容的提问来源于stack exchange，提问作者Fazla Elahi Md Jubayer