我来帮你搞定这个固定表头的需求！之前的CSS没起作用还破坏了表格样式，多半是没结合Bootstrap的表格结构来针对性调整，下面给你两种亲测有效的实现方式：

方法一：纯CSS实现（无需额外插件） #

这种方法只需要给表格加一个滚动容器，再对表头做sticky定位即可，完全兼容Bootstrap的样式：

步骤1：调整HTML结构 #

给表格套一个带类名的容器，用来控制滚动区域：

<div class="table-scroll-container">
  <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>邮箱</th>
        <th>创建时间</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里放你的多行数据 -->
      <tr><td>1</td><td>John Doe</td><td>john@example.com</td><td>2024-01-01</td></tr>
      <tr><td>2</td><td>Jane Smith</td><td>jane@example.com</td><td>2024-01-02</td></tr>
      <!-- 重复更多行模拟滚动 -->
    </tbody>
  </table>
</div>

步骤2：添加针对性CSS #

/* 定义滚动容器的高度和滚动行为 */
.table-scroll-container {
  max-height: 400px; /* 根据你的页面需求调整高度 */
  overflow-y: auto;
}

/* 固定表头核心样式 */
.table-scroll-container thead th {
  position: sticky;
  top: 0;
  z-index: 1; /* 确保表头在内容上方，不会被覆盖 */
  background-color: #ffffff; /* 和表格背景色一致，避免透明导致内容穿透 */
}

/* 修复Bootstrap表格边框在滚动时的错位问题 */
.table-scroll-container table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-scroll-container thead th {
  border-bottom-width: 2px; /* 加粗表头底部边框，区分表头和内容 */
}

.table-scroll-container tbody tr:last-child td {
  border-bottom: none; /* 去掉最后一行的底部边框，避免容器滚动时出现多余线条 */
}

为什么之前的CSS没效果？大概率是这几个原因：

• 没有给表格设置外层滚动容器，直接给表格加overflow不会生效
• 只加了position: sticky但没设置top: 0，sticky定位需要基准位置
• 没设置表头背景色，滚动时内容会透过表头显示，看起来像是没固定
• 没有处理Bootstrap默认的border-collapse: collapse，会影响sticky的表现

方法二：用Bootstrap Table插件快速实现 #

如果你不想写自定义CSS，可以用官方的Bootstrap Table插件，它自带固定表头功能，只需要添加几个属性即可：

<!-- 确保引入了Bootstrap Table的CSS和JS -->
<table 
  class="table table-bordered" 
  data-toggle="table" 
  data-fixed-header="true"
  data-height="400"
>
  <!-- 表头和内容结构不变 -->
</table>

这个方法更省心，插件已经帮你处理了各种边缘情况，比如列宽对齐、滚动时的样式兼容等。

注意事项 #

• 不管用哪种方法，都要给滚动区域设置合适的高度，否则不会触发滚动
• 表头背景色一定要设置，否则滚动时内容会和表头重叠
• 如果用插件，要确保引入的Bootstrap Table版本和你的Bootstrap版本兼容

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