如何实现tbody垂直滚动、表格整体水平滚动且表头固定？

核心实现思路 #

无需拆分表头和表格主体为两个独立DOM结构，直接用CSS原生position: sticky属性即可实现，天然保证水平滚动时表头和对应列完全对齐，无需额外JS同步逻辑。

完整实现代码 #

HTML结构 #

<!-- 外层滚动容器 -->
<div class="table-scroll-wrapper">
  <table class="fixed-header-table">
    <thead>
      <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
        <th>列标题4</th>
        <!-- 更多列按需添加 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <!-- 更多行内容按需添加 -->
    </tbody>
  </table>
</div>

CSS样式 #

/* 外层容器控制滚动范围 */
.table-scroll-wrapper {
  max-height: 500px; /* 自定义垂直滚动触发高度 */
  max-width: 100%; /* 自定义水平滚动触发宽度，可设为固定值 */
  overflow: auto;
}

.fixed-header-table {
  width: 100%;
  border-collapse: collapse;
  /* 如果需要固定列宽，可添加 table-layout: fixed; 自行定义每列宽度 */
}

.fixed-header-table th,
.fixed-header-table td {
  padding: 12px 16px;
  border: 1px solid #eee;
}

/* 表头固定核心逻辑 */
.fixed-header-table th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 必须设置背景色，避免滚动时内容透到表头上方 */
  z-index: 1;
  /* 可选：添加阴影增强表头和内容的层级区分 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

注意事项 #

• 该方案支持多层级表头，仅需给不同层级的表头设置对应的top值即可，比如二级表头高度为40px时，给二级表头设置top: 40px即可
• 所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持position: sticky属性，无需额外兼容
• 不要拆分表头和表体为两个独立表格，否则需要额外写JS同步两个表格的水平滚动位置，反而容易出现列对齐偏差

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