Angular Material mat-table 带rowspan/colspan的粘性表头错位修复

Angular Material 的粘性表头基于原生 position: sticky 实现，但其内部默认按「无跨行列的规整表格」逻辑计算行高与粘性偏移值。手动给表头单元格加原生 rowspan/colspan 属性时，原生表格的布局算法会和组件内部的计算逻辑产生冲突，滚动触发重排时就会出现位置错位。加上代码里的几处配置错误，会进一步放大这个异常。

1. 先修正基础语法与配置错误 #

• 第三行 mat-header-row 的列配置缺少右方括号，修正为：

  <tr mat-header-row *matHeaderRowDef="['DIALYSIS_15','DIALYSIS_25','DIALYSIS_425']; sticky: true"></tr>
  

• 移除单独列定义上的错误粘性配置：ESTIMATE_DT 列上写的 [sticky]="true" 是用于配置「水平滚动时固定在左侧的粘性列」，和垂直方向的表头粘性是两套独立逻辑，两者并存会导致位置计算冲突，删掉这段单独的 sticky 配置，只在 mat-header-row 层面配置垂直粘性即可。

2. 遵循组件分层表头规则，不要手动写原生跨行列属性 #

Angular Material 的列系统是严格按行列映射渲染的，手动给 th 加 rowspan/colspan 会破坏它内部维护的列宽、高度索引。正确做法是把跨行列的分组逻辑拆分到不同层级的 mat-header-row 中：

• 顶层行：放全表最大的分组列（比如“日期”、“透析液”），不要手动写 rowspan=3，而是在每一层表头行都复用对应列的定义，让组件自然渲染垂直方向的跨列效果
• 二级行：放子分组列（比如“3.5Ca”、“2.5Ca”）
• 三级行：放对应实际数据列的最小粒度表头

3. 固定所有表头单元格高度，避免动态重算 #

position: sticky 元素如果用自适应高度，滚动时浏览器会触发布局重排，进一步放大错位问题：

• 给所有 .mat-header-cell 设置固定高度，比如 height: 48px; box-sizing: border-box;
• 跨多行的表头单元格，高度设置为它覆盖的所有行高度之和（比如跨3行的“日期”单元格设置 height: 144px;）

4. 手动绑定每一行表头的粘性top偏移 #

组件默认自动计算每一行表头的top值，遇到跨行列布局时计算结果不准，直接手动绑定固定偏移，不让组件动态计算：

• 第一行表头：[style.top.px]="0"
• 第二行表头：[style.top.px]="48" （值和固定的第一行表头高度保持一致）
• 第三行表头：[style.top.px]="96" （前两行固定高度之和）

5. 开启多表头行适配 #

在 <table mat-table> 标签上添加配置，让组件正确识别多表头场景：

<table mat-table [dataSource]="dataSource" [multiTemplateDataRows]="true">

• 确保粘性元素的父级滚动容器没有设置中间层 overflow: hidden，否则会截断粘性定位的效果
• 不要在滚动容器内嵌套使用绝对定位的元素，否则会干扰 position: sticky 的参考系计算

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