如何实现外部垂直滚动、内部水平滚动的固定表头Mat Table

你的核心问题是**position: sticky的生效条件没满足**，因为sticky是相对于最近的滚动祖先元素，你之前给.mat-table-container加了overflow-y: auto，导致表头只会在这个容器内固定，而不是随页面整体滚动时固定在视口顶部。

调整方案如下：

一、修正CSS样式 #

/* 页面整体垂直滚动（如果body不是默认滚动容器，替换成你的外层容器类名） */
body {
  overflow-y: auto;
}

/* 表格水平滚动容器：负责表格列的横向滚动 */
.mat-table-horizontal-wrap {
  overflow-x: auto;
  margin: 16px 0;
}

.mat-table {
  width: 1000px; /* 固定表格总宽度，超出容器时触发水平滚动 */
  border-collapse: collapse;
}

/* 表头固定：相对于视口顶部 */
.mat-header-row {
  position: sticky;
  top: 0;
  z-index: 100; /* 确保表头在内容上方 */
  background-color: #fff;
  border-bottom: 2px solid #f0f0f0; /* 添加边框增强视觉区分 */
}

二、调整HTML结构 #

把mat-table套进水平滚动容器里：

<div class="mat-table-horizontal-wrap">
  <table mat-table [dataSource]="yourDataSource">
    <!-- 表头列定义 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <!-- 数据行定义 -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

关键注意事项 #

• 避免破坏sticky的父元素：确保.mat-header-row的所有父元素（除了body）都没有设置overflow: hidden、transform、perspective等属性，这些会导致sticky失效。
• 适配固定导航栏：如果页面顶部有固定导航栏，把top: 0改成导航栏的高度（比如top: 60px），避免表头被导航栏遮挡。
• 强制覆盖默认样式：如果Angular Material的默认样式干扰，给.mat-header-row的属性加上!important（仅在必要时使用）。

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