如何实现Angular Material datatable列头部内容的垂直对齐

失效原因 #

Angular Material的mat-header-cell默认采用Flex布局，内置的align-items: center、white-space: nowrap等默认样式优先级高于直接插入的br/p标签排版规则，所以原生标签调整不会生效。

解决方案 #

方法1：针对特定表头自定义样式 #

给需要调整的表头单元格添加专属类，覆盖默认布局规则：

1. 模板中添加自定义类

<th mat-header-cell *matHeaderCellDef class="align-custom-header">
  表头第一行内容<br>表头第二行内容
</th>

2. 添加样式规则
   如果是写在组件的样式文件中，需要搭配::ng-deep穿透样式隔离：

::ng-deep .align-custom-header {
  display: flex !important;
  flex-direction: column !important;
  /* 垂直对齐规则：居中写center，顶部对齐写flex-start，底部对齐写flex-end */
  justify-content: center !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  /* 按需调整内边距 */
  padding: 8px 16px !important;
}

如果是写在全局样式文件styles.scss中，无需加::ng-deep，直接写上面的类样式即可。

方法2：全局统一所有表头的垂直对齐规则 #

如果需要全项目所有表格表头都遵循同一种垂直对齐规则，直接覆盖mat-header-cell的默认样式：

::ng-deep mat-header-cell {
  /* 垂直对齐规则按需调整 */
  align-items: center !important;
  white-space: normal !important;
  /* 如需水平对齐可补充以下属性：left/center/right按需选 */
  text-align: center !important;
}

注意事项 #

• 使用::ng-deep时建议搭配当前组件的根选择器作为前缀，避免样式污染其他组件的表格
• 调整后直接在表头内容中插入br标签即可实现换行，无需额外用p标签包裹
• 可根据业务需求调整行高、内边距等属性适配设计规范

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