答案：通过css的position: sticky结合table结构可实现横向滚动时固定列。具体为设置容器overflow-x: auto，表格宽度自适应，对需固定的列添加sticky定位并指定left值，同时设置背景色和z-index以确保视觉效果和层级覆盖，适用于现代浏览器且无需javaScript。

在html表格中实现横向滚动时固定列（如首列或末列），可以通过CSS的 position: sticky 属性结合适当的结构和样式来完成。这种方法无需javascript，兼容现代主流浏览器。

1. 基本HTML结构

确保表格结构清晰，并为需要固定的列添加特定类名：

<div class=”table-container”>
  <table>
    <thead>
      <tr>
        <th class=”fixed”>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class=”fixed”>1</td>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
        <td>工程师</td>
      </tr>
    </tbody>
  </table>
</div>

2. 核心css样式

使用容器控制横向滚动，配合 position: sticky 固定指定列：

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

th.fixed,
td.fixed {
  position: sticky;
  left: 0;
  background-color: #f5f5f5;
  z-index: 1;
}

3. 注意事项与优化

要使 sticky 定位生效，需注意以下几点：

立即学习“前端免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

• 父容器不能有 overflow: hidden，否则会截断粘性效果
• 固定列必须设置 left 值（如 left: 0）才能触发 sticky
• 背景色建议设置，避免滚动时内容重叠造成视觉混乱
• z-index 提升层级，确保覆盖相邻单元格
• 表头若也需固定（垂直方向），可对 th 同样使用 sticky + top

4. 扩展：多列固定

若需固定前两列，可分别设置：

th.fixed-1,
td.fixed-1 {
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
}

th.fixed-2,
td.fixed-2 {
  position: sticky;
  left: 120px; /* 第一列宽度 */
  background: white;
  z-index: 1;
}

基本上就这些。只要结构合理、样式正确，用CSS就能实现流畅的横向滚动固定列效果。