如何为HTML表格中的单个列添加独立滚动条？

核心思路 #

• 固定headcol和middlecol列的宽度，避免它们随滚动变化
• 给需要滚动的列（long1和long2）的单元格内容包裹一层可滚动容器
• 通过JavaScript监听滚动事件，让同列的所有单元格滚动同步

代码实现 #

HTML 修改 #

给滚动列的内容添加<div>容器：

<table>
  <tr>
    <th class="headcol">1</th>
    <td class="long1">
      <div class="scroll-container">SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</div>
    </td>
    <th class="middlecol">1</th>
    <td class="long2">
      <div class="scroll-container">SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2</div>
    </td>
  </tr>
  <tr>
    <th class="headcol">2</th>
    <td class="long1">
      <div class="scroll-container">SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</div>
    </td>
    <th class="middlecol">2</th>
    <td class="long2">
      <div class="scroll-container">SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2 SCROLL2</div>
    </td>
  </tr>
</table>

CSS 样式 #

设置固定列宽与滚动容器样式：

/* 固定列宽度，防止随滚动变化 */
.headcol, .middlecol {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  background: #fff; /* 避免滚动时背景透明露出下方内容 */
}

/* 清除滚动列单元格的默认内边距，避免容器与单元格间出现空隙 */
.long1, .long2 {
  padding: 0;
}

/* 滚动容器核心样式 */
.scroll-container {
  width: 200px; /* 设置列的固定宽度 */
  overflow-x: auto; /* 开启水平滚动 */
  white-space: nowrap; /* 强制内容不换行 */
  padding: 8px; /* 恢复原单元格的内边距，保证排版一致 */
}

/* 自定义滚动条样式（可选，优化视觉效果） */
.scroll-container::-webkit-scrollbar {
  height: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

JavaScript 实现整列同步滚动 #

监听滚动事件，同步同列所有容器的滚动位置：

// 按列分组滚动容器
const col1Containers = document.querySelectorAll('.long1 .scroll-container');
const col2Containers = document.querySelectorAll('.long2 .scroll-container');

// 同步第一列（SCROLL列）的滚动
col1Containers.forEach(container => {
  container.addEventListener('scroll', () => {
    const scrollPosition = container.scrollLeft;
    col1Containers.forEach(c => {
      if (c !== container) c.scrollLeft = scrollPosition;
    });
  });
});

// 同步第二列（SCROLL2列）的滚动
col2Containers.forEach(container => {
  container.addEventListener('scroll', () => {
    const scrollPosition = container.scrollLeft;
    col2Containers.forEach(c => {
      if (c !== container) c.scrollLeft = scrollPosition;
    });
  });
});

说明 #

• 固定列通过width+min-width+max-width的组合确保宽度恒定，白色背景避免滚动时内容穿透
• 滚动容器利用overflow-x:auto实现水平滚动，white-space:nowrap保证内容在一行内显示
• JavaScript通过监听scroll事件，同步同列所有容器的scrollLeft值，实现整列同步滚动

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