实现表格首列冻结且页面body横向滚动的CSS方案问询

阿华AIGC实验室

2026-5-12

实现冻结列且横向滚动条在页面Body的表格

我懂你要的这种效果——市面上很多冻结列表格的方案都是把滚动条放在表格自己的容器里，但你希望横向滚动条直接挂在页面body上，这样用户不用特意滚动到表格区域就能左右浏览，确实更方便。下面是验证可行的实现方案：

核心思路

把需要固定的列设置为position: absolute，指定固定的left值和背景色，避免被滚动内容覆盖
不给表格外层容器设置overflow属性，让表格自然撑开宽度触发body的横向滚动
给非固定列设置左边距，避免内容被固定列遮挡

完整代码实现

CSS 样式

/* 固定第一列和第二列 */
.stickyCol2 tr th:nth-child(1), 
.stickyCol2 tr td:nth-child(1) {
  position: absolute;
  width: 50px;
  left: 15px;
  top: auto;
  background-color: #fff;
  z-index: 1; /* 确保固定列在滚动内容上层 */
}

.stickyCol2 tr th:nth-child(2), 
.stickyCol2 tr td:nth-child(2) {
  position: absolute;
  width: 60px;
  left: 86px; /* 第一列宽+间距，避免列重叠 */
  top: auto;
  background-color: #fff;
  z-index: 1;
}

/* 非固定列设置左边距，避开固定列区域 */
.stickyCol2 tr th:nth-child(n+3), 
.stickyCol2 tr td:nth-child(n+3) {
  margin-left: 161px; /* 固定列总宽度+间距，确保内容不被遮挡 */
}

/* 让表格宽度超过视口，触发body横向滚动 */
.stickyCol2 table {
  width: 2000px; /* 可根据实际内容调整，或让内容自然撑开 */
  border-collapse: collapse;
}

.stickyCol2 th, .stickyCol2 td {
  border: 1px solid #ccc;
  padding: 8px;
}

HTML 结构

<div class="stickyCol2">
  <table>
    <thead>
      <tr>
        <th>Item 1</th>
        <th>Item 2</th>
        <th>Item 3</th>
        <th>Item 4</th>
        <th>Item 5</th>
        <th>Item 6</th>
        <th>Item 7</th>
        <th>Item 8</th>
        <!-- 更多列用于撑开表格宽度 -->
        <th>Item 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1-1</td>
        <td>Row 1-2</td>
        <td>Row 1-3</td>
        <td>Row 1-4</td>
        <td>Row 1-5</td>
        <td>Row 1-6</td>
        <td>Row 1-7</td>
        <td>Row 1-8</td>
        <td>Row 1-20</td>
      </tr>
      <tr>
        <td>Row 2-1</td>
        <td>Row 2-2</td>
        <td>Row 2-3</td>
        <td>Row 2-4</td>
        <td>Row 2-5</td>
        <td>Row 2-6</td>
        <td>Row 2-7</td>
        <td>Row 2-8</td>
        <td>Row 2-20</td>
      </tr>
      <!-- 可添加更多行模拟真实表格 -->
    </tbody>
  </table>
</div>