Angular中mat-table内垂直滚动与粘性表头实现，滚动条位置异常求助

要实现滚动条位于表格内部的粘性表头表格，核心是让表体（tbody）单独滚动，而非给外层容器添加滚动逻辑。你的当前方案是给外层div设置滚动，导致滚动条出现在表格外部，以下是纯CSS的解决步骤：

问题根源 #

Mat-Table默认DOM结构中，<thead>与<tbody>为同级元素，直接给外层容器加滚动会让整个表格（含表头）被包裹，滚动条自然落在容器上。要让滚动条处于表格内部，需将滚动逻辑转移到<tbody>上。

修正后的代码 #

1. 修复HTML表头样式错误 #

你原本的mat-header-row中style="#A8ACAA"写法无效，需改为正确的背景色设置：

<tr
  mat-header-row
  *matHeaderRowDef="displayedColumns; sticky: true"
  style="background-color: #A8ACAA"
></tr>

2. 替换CSS样式 #

移除外层容器的overflow:auto，转而给表格和tbody设置专属样式：

.my-table{
  height: 400px;
  /* 移除原overflow:auto，让表格内部负责滚动 */
}

.mat-table {
  width: 100%;
  display: block; /* 将表格设为块级元素，便于控制tbody高度 */
  table-layout: fixed; /* 固定表格布局，确保表头与表体列宽对齐 */
}

/* 保持表头粘性 */
.mat-header-row {
  position: sticky;
  top: 0;
  z-index: 1; /* 确保表头在表体上方，避免被遮挡 */
}

/* 让表体单独滚动 */
.mat-table tbody {
  display: block;
  /* 计算表体高度：容器高度 - 表头高度（Mat-Header-Row默认高度为48px，可按需调整） */
  height: calc(100% - 48px);
  overflow-y: auto;
}

/* 统一表头和表体单元格的显示方式，确保列对齐 */
.mat-header-row, .mat-row {
  display: table-row;
}

/* 可选：手动设置列宽，适配你的列数（这里是4列，每列25%） */
.mat-header-cell, .mat-cell {
  width: 25%;
  box-sizing: border-box;
}

关键说明 #

• table-layout: fixed：强制表格列宽均匀分配，避免表头和表体因内容长度差异导致列错位。
• tbody设为display:block并设置固定高度：让tbody成为独立可滚动区域，滚动条会出现在tbody右侧，即表格内部区域。
• sticky: true配合position: sticky：确保表头在tbody滚动时固定在顶部。

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