嘿，我之前也踩过一模一样的坑！给表格加display:block确实能把表头粘住，但列直接就歪得没眼看，折腾了好久才找到靠谱的解决办法——核心就是别破坏表格原生的布局逻辑，用容器来管滚动，表头靠sticky定位来固定，这样列宽会自动严丝合缝对齐。

直接上可落地的方案：

实现思路 #

1. 给表格套一个外层容器，用这个容器来限制高度并提供滚动能力
2. 给表头的th设置sticky定位，让它在容器滚动到顶部时固定
3. 保留表格原生的布局模式，避免列宽计算逻辑失效

完整代码示例 #

HTML结构

<div class="table-scroll-wrap">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="sticky-header">Status</th>
        <!-- 这里可以添加更多表头列，比如Name、CreateTime等 -->
      </tr>
    </thead>
    <tbody>
      <tr><td>test</td></tr>
      <tr><td>pending</td></tr>
      <tr><td>completed</td></tr>
      <!-- 这里放足够多的数据行，触发滚动效果 -->
    </tbody>
  </table>
</div>

CSS样式

/* 滚动容器：控制最大高度，让tbody在内部滚动 */
.table-scroll-wrap {
  max-height: 540px;
  overflow-y: auto;
}

/* 表格核心：保留原生布局，确保列宽自动对齐 */
.table {
  table-layout: fixed; /* 可选，开启后列宽固定，内容过长会自动换行，稳定性更强 */
  width: 100%;
  border-collapse: collapse; /* 合并边框，避免微小的对齐误差 */
}

/* 固定表头的关键设置 */
.sticky-header {
  position: sticky;
  top: 0;
  background-color: #fff; /* 必须加背景色，不然滚动时下面的内容会透出来 */
  z-index: 1; /* 确保表头在内容上方，不会被数据行覆盖 */
}

/* 统一th和td的内边距、边框，避免因样式差异导致列宽不一致 */
.table th, .table td {
  padding: 0.75rem;
  border: 1px solid #dee2e6;
}

为什么这个方案能解决你的问题？ #

你之前用display:block的问题在于，把表格改成块级元素后，直接废掉了浏览器自带的表格列对齐逻辑——表格本来是靠table布局自动计算thead和tbody的列宽，改成块级后这个逻辑就失效了，自然就错位了。

现在这个方案：

• 表格始终保持原生的table布局，浏览器会自动让thead和tbody的列宽严格匹配
• 滚动逻辑交给外层容器，完全不影响表格内部的布局计算
• sticky定位只是让表头在特定位置固定，不会干扰列宽的计算

额外小提醒 #

• 如果不需要固定列宽，可以删掉table-layout:fixed，浏览器会根据内容自动计算列宽，但要保证thead和tbody的列数完全一致
• 表头的背景色一定要设置，不然滚动时下面的内容会透过表头显示出来
• 如果你用了Bootstrap的table类，不需要修改它的基础样式，只需要叠加我们自定义的容器和sticky样式就可以，兼容性拉满

这样调整后，你就能得到一个滚动流畅、表头固定、列完全对齐的表格啦！