如何为带sticky header的Angular mat table添加横向滚动条

核心注意：不要直接给mat-table/原生table元素本身加overflow属性，会破坏sticky定位的上下文，导致粘性表头失效。

实现步骤 #

• 第一步：给表格套一层独立的外层滚动容器，把滚动逻辑放在容器上，不要绑定在表格本身
• 第二步：调整容器和表格的CSS规则，保证表格列宽超出容器时触发横向滚动，同时不影响sticky表头的固定效果

代码示例 #

HTML 结构调整 #

在原有mat-table外层套一层滚动容器，原有表格的stickyHeader属性保留即可：

<div class="table-scroll-wrapper">
  <table mat-table id="table" [dataSource]="yourDataSource" stickyHeader>
    <!-- 原有列定义、行定义代码保持不变 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS 样式（替换原有样式即可） #

/* 外层滚动容器 */
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto; /* 核心：开启横向自动滚动 */
  /* 如需同时支持纵向滚动+顶部粘性表头，可追加以下两行，按需调整max-height值 */
  /* max-height: 70vh; */
  /* overflow-y: auto; */
}

#table {
  /* 移除原有width: 100%，替换为min-width，避免列宽被强制挤压 */
  min-width: 100%;
  border-collapse: collapse; /* 消除sticky表头和内容之间的缝隙 */
}

#table tr.mat-row {
  height: 40px;
}

/* 修复sticky表头滚动时的遮挡、透传问题 */
#table .mat-header-row {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff; /* 必须加不透明背景，否则滚动时单元格会从表头下方透出 */
}

常见问题说明 #

• 如果需要固定列宽，直接给对应th/td设置固定width即可，所有列总宽度超过外层容器宽度时，横向滚动条会自动出现
• 不要给table元素设置overflow: auto，会直接让sticky表头的固定逻辑失效
• 如果是15+版本的Angular Material，把样式里的.mat-header-row替换为.mat-mdc-header-row即可适配

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