如何为Angular MD Bootstrap表格添加顶部与底部水平滚动条（无需JS滚动代码）

嘿，这个需求纯CSS就能完美解决，完全不用写一行JS代码！核心思路是复制一份和原表格列宽匹配的空表头放在容器顶部，通过CSS让它只显示滚动条，并且和原表格的滚动行为同步。

具体实现步骤： #

1. 给表格套一个自定义的外层容器，用来控制顶部滚动条的定位
2. 在原表格容器前，添加一个镜像表头容器，里面放一个和原表格列宽一致的空表头
3. 通过CSS设置镜像表头的样式，只显示滚动条，隐藏内容，同时让滚动操作同步到原表格

修改后的完整代码 #

HTML部分：

<div layout="column" layout-align="center stretch" flex> 
  <div layout="row" style="margin: 20px;"> 
    <div flex></div> 
  </div> 
  <!-- 新增的外层容器，用于控制双滚动条 -->
  <div class="dual-scroll-wrapper">
    <!-- 顶部镜像表头：只显示滚动条，内容隐藏 -->
    <div class="dual-scroll-top">
      <md-table-container>
        <table md-table>
          <thead md-head>
            <tr md-row>
              <!-- 列宽必须和原表格完全匹配 -->
              <th md-column style="min-width: 200px;"></th>
              <th md-column></th>
              <th md-column style="min-width: 80px;"></th>
              <th md-column></th>
            </tr>
          </thead>
        </table>
      </md-table-container>
    </div>
    <!-- 原表格容器 -->
    <md-table-container flex> 
      <table md-progress="vm.searchTablePromise" md-table single> 
        <thead md-sticky style="background-color:#00a9da;" md-head md-order="vm.query.order"> 
          <tr md-row> 
            <th style="color: white;" md-column md-order-by="name"> Name </th> 
            <th style="color: white;" md-column md-order-by="id"> ID </th> 
            <th style="color: white;" md-column md-order-by="ein"> EIN </th> 
            <th style="color: white;" md-column md-order-by="phNumber"> Ph. Number </th> 
          </tr> 
        </thead> 
        <tbody md-body> 
          <tr md-row ng-repeat="item in vm.data"> 
            <td md-cell> 
              <div style="min-width: 200px;">{{item.name}}</div> 
            </td> 
            <td md-cell> {{item.id}} </td> 
            <td md-cell> 
              <div style="min-width: 80px;">{{item.ein}}</div> 
            </td> 
            <td md-cell> {{item.phNumber}} </td> 
          </tr> 
        </tbody> 
      </table> 
    </md-table-container>
  </div>
</div>

CSS部分：

.dual-scroll-wrapper {
  position: relative;
  overflow: hidden;
}

.dual-scroll-top {
  /* 固定在容器顶部 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 高度刚好容纳滚动条，可根据浏览器微调 */
  height: 18px;
  /* 只显示水平滚动条 */
  overflow-x: auto;
  overflow-y: hidden;
  /* 让点击穿透到下方的原表格，保证滚动操作同步 */
  pointer-events: none;
}

.dual-scroll-top .md-table-container {
  height: 100%;
}

.dual-scroll-top table {
  /* 隐藏整个表格，只保留滚动条区域 */
  visibility: hidden;
  border-collapse: collapse;
}

.dual-scroll-top th {
  padding: 0;
  border: none;
}

.dual-scroll-top thead {
  /* 让表头区域可见，确保滚动条宽度和原表格一致 */
  visibility: visible;
}

.dual-scroll-top thead tr {
  /* 隐藏表头行的高度，只保留滚动条 */
  height: 0;
}

关键细节说明： #

• 列宽匹配：镜像表头的列宽必须和原表格完全一致（比如原表格第一列min-width:200px，镜像表头也要设置相同值），这样两个滚动区域的宽度才会同步
• 滚动同步：通过pointer-events: none让顶部滚动条的操作直接作用于下方的原表格，拖动顶部滚动条时，原表格会同步滚动
• 样式隐藏：通过visibility属性控制镜像表头的显示状态，只保留滚动条可见，不会影响原表格的视觉效果

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