如何将表格水平滚动条移至thead下方（数据区域顶部）？

我有一个列数很多的表格，外层容器带有table-responsive类，对应的CSS设置如下：

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: scrollbar;
}

当前设置能正常显示水平滚动条，但滚动条出现在表格底部，我希望它显示在表格数据区域的顶部（也就是<thead>之后、<tbody>之前的位置）。表格的HTML结构如下：

<table class="table table-bordered table-sm">
    <thead class="thead-dark">
         <tr>
              <th>Col 1</th>
              <th>Col 2</th>
              <th>Col 3</th>
              ..
              <th>Col 10</th>
         </tr>
    </thead>
    <tbody>
         <tr>
              ...
         </tr>
    </tbody>
</table>

原生CSS无法直接调整滚动条的显示位置，需要通过拆分滚动区域+同步滚动的方式实现，具体步骤如下：

1. 调整HTML结构 #

将表头和表体分别放入独立容器，让表体容器承载滚动条：

<div class="table-container">
  <!-- 表头容器（无滚动条） -->
  <div class="table-header">
    <table class="table table-bordered table-sm">
      <thead class="thead-dark">
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <!-- 更多列 -->
          <th>Col 10</th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- 表体容器（显示顶部滚动条） -->
  <div class="table-body">
    <table class="table table-bordered table-sm">
      <tbody>
        <tr>
          <!-- 表格内容 -->
        </tr>
      </tbody>
    </table>
  </div>
</div>

2. 添加CSS样式 #

通过翻转容器的方式让滚动条显示在顶部，同时隐藏表头容器的滚动条：

.table-container {
  width: 100%;
}

.table-header, .table-body {
  width: 100%;
  overflow-x: auto;
}

/* 让表体滚动条移到顶部 */
.table-body {
  transform: rotateX(180deg);
}
.table-body table {
  transform: rotateX(180deg); /* 翻转表格内容，保证正常显示 */
}

/* 隐藏表头容器的滚动条 */
.table-header::-webkit-scrollbar {
  display: none;
}
.table-header {
  scrollbar-width: none; /* 适配火狐浏览器 */
}

3. 同步表头与表体的滚动 #

用JavaScript监听表体滚动事件，同步表头的滚动位置，确保列对齐：

const tableHeader = document.querySelector('.table-header');
const tableBody = document.querySelector('.table-body');

tableBody.addEventListener('scroll', () => {
  tableHeader.scrollLeft = tableBody.scrollLeft;
});

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