纯CSS实现固定表头双轴滚动表格，解决滚动条隐藏问题

你的问题核心在于原方案把tbody和thead拆成了独立的块级元素，导致宽度计算错位，而且垂直滚动条被嵌套的容器遮挡。这里有两种纯CSS方案，第二种更简洁且能完美解决你的问题：

方案一：修复你原有的实现 #

原代码里thead { width: calc(100% - 17px) }的硬编码滚动条宽度（17px）是问题根源——不同浏览器的滚动条宽度可能不一样，而且水平滚动时会让表头和tbody宽度错位。我们可以通过以下调整修复：

• 移除thead的宽度计算，让thead和tbody保持相同宽度
• 把垂直滚动条移到外层容器，避免嵌套遮挡

修改后的CSS：

table, tr td, tr th { border: 1px solid grey }
div.table-holder { 
  width: 300px; 
  max-height: 300px; 
  overflow: auto; /* 外层容器同时处理水平/垂直滚动 */
}
table { 
  width: 100%; 
  table-layout: fixed; /* 固定列宽 */
}
thead th {
  position: sticky;
  top: 0;
  background: #fff; /* 背景色覆盖下方内容 */
}
td, th { width: 35px; overflow: hidden; }

HTML结构不用改动，这样表头会通过sticky定位固定在顶部，外层容器的滚动条统一控制，不会出现遮挡问题。

方案二：更简洁的原生实现（推荐） #

直接用CSS position: sticky实现固定表头，同时让外层容器负责所有滚动逻辑，这是目前最简洁的纯CSS方案：

/* 基础样式 */
.table-container {
  width: 300px;
  max-height: 300px;
  overflow: auto;
  border: 1px solid grey;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  border: 1px solid grey;
  width: 35px;
  overflow: hidden;
  text-align: left;
  padding: 4px;
}

/* 固定表头核心 */
thead th {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 1; /* 确保表头在内容上方 */
}

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Gaga001</th>
        <th>Gaga002</th>
        <th>Gaga003</th>
        <th>Gaga004</th>
        <th>Gaga005</th>
        <th>Gaga006</th>
        <th>Gaga007</th>
        <th>Gaga008</th>
        <th>Gaga009</th>
        <th>Gaga010</th>
        <th>Gaga011</th>
        <th>Gaga012</th>
        <th>Gaga013</th>
        <th>Gaga014</th>
        <th>Gaga015</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
        <td>011</td>
        <td>012</td>
        <td>013</td>
        <td>014</td>
        <td>015</td>
      </tr>
      <tr>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
        <td>011</td>
        <td>012</td>
        <td>013</td>
        <td>014</td>
        <td>015</td>
      </tr>
      <!-- 更多内容行 -->
    </tbody>
  </table>
</div>

为什么这个方案有效？ #

1. position: sticky让表头在垂直滚动时固定在容器顶部，水平滚动时会跟随表格一起移动，完美适配双轴滚动需求
2. 外层容器统一处理滚动，避免了嵌套滚动条的遮挡问题
3. table-layout: fixed确保列宽固定，避免内容撑开表格导致布局混乱

注意事项 #

• 必须给表头设置背景色，否则滚动时下方内容会透过表头显示
• 确保外层容器的max-height或height属性已设置，否则不会出现垂直滚动条

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