如何实现表格表头粘视口顶部、首列粘容器左侧的滚动效果？

1. 调整HTML结构 #

把表格拆分为表头容器和表体容器，确保两者宽度一致避免列错位：

<!-- 表头容器：实现顶部粘滞 -->
<div class="table-header">
  <table>
    <thead>
      <tr>
        <th>首列</th>
        <th>列2</th>
        <th>列3</th>
        <!-- 更多列... -->
      </tr>
    </thead>
  </table>
</div>

<!-- 表体容器：保留原水平滚动 -->
<div class="table-body-container">
  <table>
    <tbody>
      <tr>
        <td>首列内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <!-- 更多列... -->
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

2. 设置核心CSS #

• 表头容器设置粘滞定位，确保吸附在视口顶部：

.table-header {
  position: sticky;
  top: 0;
  background: #fff; /* 避免下方内容穿透 */
  z-index: 10; /* 保证表头层级高于首列 */
}

• 表体容器保留原有水平滚动，同时给首列设置左侧粘滞：

.table-body-container {
  width: 100%;
  overflow-x: auto;
}

.table-body-container td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

• 强制表头和表体列宽一致：

.table-header table,
.table-body-container table {
  width: 100%;
  table-layout: fixed; /* 自动分配列宽并保持一致 */
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

3. 同步水平滚动 #

由于表头和表体是独立表格，需要用JS同步两者的水平滚动位置：

const bodyContainer = document.querySelector('.table-body-container');
const headerContainer = document.querySelector('.table-header');

bodyContainer.addEventListener('scroll', () => {
  headerContainer.scrollLeft = bodyContainer.scrollLeft;
});

方案逻辑说明 #

• 表头的sticky以视口为滚动祖先（父容器无overflow设置），因此能稳定吸附在视口顶部。
• 表体首列的sticky以带overflow-x: auto的容器为滚动祖先，水平滚动时会固定在容器左侧。
• JS同步滚动解决了独立表格的列对齐问题，确保操作体验一致。

内容的提问来源于stack exchange，提问作者shau-kote