Angular Material mat-table金额/数字列表头无法右对齐的解决诉求

方案一：自定义类精准控制 #

在模板的列定义中，给目标列的表头和单元格添加自定义类：

<ng-container matColumnDef="amount">
  <th mat-header-cell *matHeaderCellDef class="right-align-header"> 金额 </th>
  <td mat-cell *matCellDef="let element" class="right-align"> {{element.amount | currency}} </td>
</ng-container>

然后在全局样式或组件样式中添加CSS：

/* 高优先级选择器覆盖默认样式，确保表头右对齐 */
.mat-table .mat-header-cell.right-align-header {
  text-align: right;
  padding-right: 16px; /* 和单元格内边距保持一致，保证视觉对齐 */
}

/* 单元格的右对齐样式 */
.mat-table .mat-cell.right-align {
  text-align: right;
}

方案二：通过列名直接定位（无需修改模板） #

利用Angular Material自动生成的mat-column-xxx类（xxx为matColumnDef的取值），直接定位目标列的表头和单元格：

/* 金额列表头右对齐 */
.mat-table .mat-header-cell.mat-column-amount {
  text-align: right;
  padding-right: 16px;
}

/* 金额列单元格右对齐 */
.mat-table .mat-cell.mat-column-amount {
  text-align: right;
}

补充说明 #

如果之前尝试display:flex方案无效，可针对表头内部布局调整：

.mat-header-cell.mat-column-amount {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

这种方式适合表头包含多个元素的场景，能确保整体内容右对齐。

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