固定顶部表格的横向滚动及多表格联动滚动实现方案问询

要实现「多表格横向滚动+首表固定顶部」的效果，核心要解决三个问题：横向滚动容器、固定定位的首表、避免遮挡和滚动错位。以下是完整实现方案：

核心实现要点 #

• 外层容器开启横向滚动，作为所有表格的滚动上下文
• 首表通过固定定位钉在顶部，同时处理脱离文档流后的遮挡问题
• 统一所有表格的列宽和布局规则，保证横向滚动时列对齐

完整代码示例 #

HTML 结构

<div class="table-container">
  <div id="firstTableWrapper">
    <table id="firstTable" class="tableClass">
      <tr class="trFirst">
        <th><span>Make</span></th>
        <td>Harley-Davidson</td>
        <td>BMW</td>
        <td>Honda</td>
        <td>Yamaha</td>
        <td>Ducati</td>
        <td>Kawasaki</td>
      </tr>
    </table>
  </div>
  <!-- 给后续表格容器加margin-top，避开固定的首表 -->
  <div class="rest-tables">
    <table class="tableClass">
      <tr>
        <th><span>Model</span></th>
        <td>Street Glide</td>
        <td>R 1250 GS Adventure</td>
        <td>CBR600RR</td>
        <td>YZF-R6</td>
        <td>Panigale V2</td>
        <td>Ninja ZX-10R</td>
      </tr>
      <tr>
        <th><span>Color</span></th>
        <td>Black</td>
        <td>White</td>
        <td>Red</td>
        <td>Blue</td>
        <td>Red</td>
        <td>Green</td>
      </tr>
    </table>
    <!-- 可添加更多表格 -->
  </div>
</div>

CSS 样式

/* 外层滚动容器 */
.table-container {
  max-width: 100%;
  overflow-x: auto;
  position: relative;
}

/* 首表固定容器 */
#firstTableWrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff; /* 背景色避免下方内容穿透 */
  z-index: 10; /* 确保首表在最上层 */
}

/* 后续表格容器：留出首表的高度空间 */
.rest-tables {
  margin-top: 48px; /* 数值需等于首表的实际高度 */
}

/* 统一表格样式，保证列对齐 */
.tableClass {
  width: 100%;
  table-layout: fixed; /* 固定布局，列宽由<th>/<td>定义 */
  border-collapse: collapse;
}

.tableClass th, .tableClass td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  width: 14.28%; /* 7列均分宽度，可根据实际内容调整 */
}

关键细节说明 #

1. 固定定位处理：position: fixed 会让首表脱离文档流，所以必须给后续内容加 margin-top 避免被遮挡；设置背景色和z-index防止下方内容透过首表显示。
2. 滚动对齐：所有表格使用 table-layout: fixed 并设置统一列宽，确保横向滚动时列对齐，不会出现错位。
3. 滚动容器：外层 .table-container 的 overflow-x: auto 保证所有表格超出视口宽度时可横向滑动。

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