Bootstrap表格固定表头并自定义列宽实现方案

我来帮你搞定这个需求！其实只需要结合Bootstrap的表格类和一点自定义CSS就能轻松实现，核心思路是把表头固定在顶部，同时给tbody设置固定高度让它可以滚动，还能保证列宽对齐不错位。下面是完整的可直接使用的代码示例：

完整代码实现 #

HTML结构 #

<!-- 记得先引入Bootstrap的CSS文件 -->
<div class="table-container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th width='100'>Sr. No</th>
        <th width='200'>Name</th>
        <th width='100'>Addr</th>
      </tr>
    </thead>
    <tbody class="table-body-scroll">
      <tr><td>1</td><td>Abc</td><td>Mumbai</td></tr>
      <tr><td>2</td><td>Pqr</td><td>Mumbai</td></tr>
      <tr><td>3</td><td>Lmn</td><td>Mumbai</td></tr>
      <tr><td>4</td><td>Xyz</td><td>Mumbai</td></tr>
      <!-- 多添加几行测试滚动效果 -->
      <tr><td>5</td><td>Test User 1</td><td>Mumbai</td></tr>
      <tr><td>6</td><td>Test User 2</td><td>Mumbai</td></tr>
      <tr><td>7</td><td>Test User 3</td><td>Mumbai</td></tr>
      <tr><td>8</td><td>Test User 4</td><td>Mumbai</td></tr>
    </tbody>
  </table>
</div>

自定义CSS样式 #

/* 容器样式，可根据你的页面布局调整 */
.table-container {
  max-width: 400px;
  margin: 2rem auto;
}

/* 关键：让表头固定在顶部 */
.table thead {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 设置背景色防止滚动时内容穿透 */
  z-index: 1; /* 确保表头在tbody上方 */
}

/* 让tbody区域可滚动 */
.table-body-scroll {
  display: block;
  height: 200px; /* 自定义tbody的高度，超过就会出现滚动条 */
  overflow-y: auto;
}

/* 保证表头和tbody的列宽完全对齐 */
.table-body-scroll tr,
.table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

核心要点说明 #

• position: sticky：这是实现表头固定最简洁的方式，兼容性很好（支持现代浏览器和IE11+），不需要复杂的DOM结构拆分
• table-layout: fixed：强制表格列宽按照设置的宽度渲染，避免表头和tbody因为内容长度不同导致列错位
• tbody的display: block：默认情况下tbody是table-row-group，无法设置高度，改成block后才能设置固定高度和滚动属性
• 背景色和z-index：防止滚动时tbody的内容透过表头显示，提升视觉体验

这个方案适配Bootstrap 3、4、5版本，你只需要根据自己使用的Bootstrap版本调整表格类名（比如如果是Bootstrap 3，table-bordered依然可用），核心CSS逻辑不变。

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