如何实现Bootstrap表格固定表头并支持横竖滚动？

我之前也踩过表格表头固定的坑，结合你的需求（响应式、动态列宽、横竖滚动），给你一个简洁的纯CSS解决方案，完美兼容Bootstrap样式，还不用复杂的JS：

核心思路 #

用外层容器统一处理滚动逻辑，通过position: sticky实现表头固定，同时保留表格默认的自动列宽特性，彻底避免列错位问题。

完整代码实现 #

CSS 样式

/* 滚动容器：处理横竖滚动和响应式高度 */
.table-container {
  max-height: 350px; /* 可替换为80vh实现视口自适应，或根据父容器调整 */
  overflow-y: auto;
  overflow-x: auto;
}

/* 固定表头核心样式 */
.table-fixed thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #ffffff; /* 背景色覆盖tbody内容，避免透显 */
}

/* 基础表格样式优化（兼容Bootstrap） */
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dee2e6; /* 复用Bootstrap默认边框色，样式更协调 */
  padding: 0.75rem;
}

HTML 结构

<div class="container">
  <div class="table-container">
    <table class="table-fixed table table-hover">
      <thead class="table-light"> <!-- 用Bootstrap的table-light美化表头 -->
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <!-- 插入你的多行数据示例 -->
        <tr><td>1</td><td>John</td><td>Doe</td><td>30</td><td>New York</td><td>USA</td><td>Male</td><td>Sample Text</td><td>Sample Text</td><td>Sample Text</td><td>Sample Text</td></tr>
        <tr><td>2</td><td>Jane</td><td>Smith</td><td>25</td><td>London</td><td>UK</td><td>Female</td><td>Sample Text</td><td>Sample Text</td><td>Sample Text</td><td>Sample Text</td></tr>
        <!-- 更多数据行... -->
      </tbody>
    </table>
  </div>
</div>

关键细节说明 #

1. 响应式高度：把.table-container的max-height改成80vh，表格会自动适配不同屏幕高度；如果要贴合父容器，设置height: 100%并确保父容器有明确高度即可。
2. 动态列宽：保留了表格默认的table-layout: auto，列宽会根据内容自动调整，th和td的宽度完全同步，不需要额外JS计算列宽。
3. 表头固定：position: sticky是现代浏览器普遍支持的特性，比传统拆分thead/tbody的方案更简洁，从根源上避免列错位。
4. Bootstrap兼容：复用了Bootstrap的table、table-light、table-hover等类，样式统一且不会冲突。

注意事项 #

• 必须设置border-collapse: collapse，否则表头和tbody之间会出现明显间隙。
• 给表头设置背景色，防止滚动时tbody内容透显出来。
• 如果需要兼容旧版IE，可以添加JS fallback，但目前主流浏览器都已支持position: sticky。

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