Angular Material表格粘性表头失效：开启overflow-x后无法固定

当给表格容器开启overflow-x: auto后，表头粘性失效是因为粘性定位元素的滚动上下文被横向滚动容器接管，导致垂直滚动时无法保持固定。以下是具体解决方法：

1. 拆分滚动容器层级 #

把垂直滚动与水平滚动分离为两个独立容器，让表头的粘性定位对应垂直滚动上下文：

• 外层容器负责垂直滚动，设置固定/最大高度与overflow-y: auto
• 内层容器负责水平滚动，设置overflow-x: auto

示例HTML结构：

<div class="table-vertical-wrapper">
  <div class="table-horizontal-wrapper">
    <table mat-table [dataSource]="dataSource">
      <!-- 已设置sticky: true的表头列 -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef sticky> 序号 </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
      <!-- 其他列定义... -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>

2. 添加对应CSS样式 #

.table-vertical-wrapper {
  max-height: 400px; /* 根据业务需求调整高度 */
  overflow-y: auto;
}

.table-horizontal-wrapper {
  overflow-x: auto;
  width: 100%;
}

/* 确保表头滚动时不被内容遮挡 */
.mat-header-row {
  z-index: 1;
}

3. 检查版本兼容性 #

确保使用Angular Material v12及以上版本，旧版本存在粘性表头与横向滚动冲突的已知bug，升级至稳定版本可规避此类问题。

原理说明 #

粘性定位(position: sticky)依赖于最近的滚动容器，拆分滚动层级后，表头的粘性定位会绑定到外层垂直滚动容器，内层容器仅处理横向滚动，两者互不干扰，即可实现垂直滚动时表头固定、横向滚动时表头随内容同步移动的效果。

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