如何实现div内HTML表格初始偏移隐藏首列，滚动时显示？

HTML 结构 #

仅需为包裹表格的div添加指定类，表格及内部元素无需额外类名：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>首列</th>
        <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
        <th>第五列</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1首列内容</td>
        <td>行1第二列内容</td>
        <td>行1第三列内容</td>
        <td>行1第四列内容</td>
        <td>行1第五列内容</td>
      </tr>
      <tr>
        <td>行2首列内容</td>
        <td>行2第二列内容</td>
        <td>行2第三列内容</td>
        <td>行2第四列内容</td>
        <td>行2第五列内容</td>
      </tr>
    </tbody>
  </table>
</div>

CSS 样式（单独文件） #

/* 容器核心样式 */
.table-container {
  width: 350px;
  overflow-x: auto;
  /* 初始偏移量等于首列宽度，这里设为120px，可根据实际调整 */
  scroll-padding-left: 120px;
  /* 可选：添加平滑滚动效果 */
  scroll-behavior: smooth;
}

/* 表格及单元格样式，确保列宽固定 */
.table-container table {
  width: auto;
  border-collapse: collapse;
}

.table-container th,
.table-container td {
  width: 120px; /* 统一列宽，和scroll-padding-left数值对应 */
  padding: 8px 12px;
  border: 1px solid #eee;
  text-align: left;
}

关键逻辑说明 #

1. 初始偏移实现：通过scroll-padding-left给滚动容器设置左侧内边距，页面加载时滚动条默认停在偏移首列宽度的位置，从而隐藏首列。
2. 滚动显示首列：容器开启overflow-x: auto后，用户可拖动滚动条到最左侧，首列会完全显示。
3. 列宽匹配：必须给单元格设置固定宽度，保证scroll-padding-left的数值和首列宽度完全一致，避免初始偏移出现偏差。若首列宽度为动态值，也可通过JS获取宽度后设置容器的scrollLeft属性，纯CSS方案更轻量化。

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