如何为表格顶部添加水平滚动条？也可支持上下同时配置滚动条

架构老林

2026-10-5

解决方案

方案1：纯CSS实现顶部水平滚动条（零JS，实现最简）

这是成本最低的方案，通过翻转容器让滚动条移到顶部，不会影响表格的显示和功能：

给你现有代码里的.table-responsive容器新增自定义类名top-scroll：

<div class="table-responsive top-scroll">
  <!-- 原有表格代码保持不变 -->
</div>

加入以下CSS样式：

.top-scroll {
  overflow-x: auto;
  /* 翻转容器，滚动条会移动到顶部 */
  transform: rotateX(180deg);
}
.top-scroll table {
  /* 表格再翻转回来，内容显示正常 */
  transform: rotateX(180deg);
}

优点：无额外JS代码，兼容性好，所有现代浏览器都支持；缺点：仅顶部有滚动条，底部无滚动条。

方案2：JS实现上下双水平滚动条（联动同步）

适合需要上下都有滚动条的场景，操作更灵活：

先修改HTML结构，在原有表格容器上方加一个顶部滚动条容器：

<!-- 新增顶部滚动条容器 -->
<div class="top-scroll-bar" style="overflow-x: auto;">
  <div style="height: 1px;"></div>
</div>
<!-- 原有表格容器添加id方便选择 -->
<div class="table-responsive" id="auditTableContainer">
  <!-- 原有表格代码保持不变 -->
</div>

加入以下JS代码实现滚动联动：

const topScroll = document.querySelector('.top-scroll-bar');
const tableContainer = document.querySelector('#auditTableContainer');
const topScrollInner = topScroll.querySelector('div');

// 同步顶部滚动条可滚动宽度和表格实际宽度
function syncScrollWidth() {
  topScrollInner.style.width = tableContainer.scrollWidth + 'px';
}
// 页面加载、窗口尺寸变化时重新同步宽度
window.addEventListener('load', syncScrollWidth);
window.addEventListener('resize', syncScrollWidth);

// 双向联动滚动
topScroll.addEventListener('scroll', () => {
  tableContainer.scrollLeft = topScroll.scrollLeft;
});
tableContainer.addEventListener('scroll', () => {
  topScroll.scrollLeft = tableContainer.scrollLeft;
});