Bootstrap 不支持原生固定表头，需对每个 设置 position: sticky; top: 0 并包裹带 max-height 和 overflow-y: auto 的容器，同时注意 Safari 兼容性及复杂表格场景推荐使用专业库。

Bootstrap 本身不提供原生的「固定表头」（sticky header）表格组件，table 在滚动时表头不会自动悬浮；必须手动干预 CSS 或借助少量 JS，否则在 .table-responsive 容器里一滚动，表头就消失。

为什么 .table-responsive 不够用

它只是给表格加了个横向滚动容器，对纵向滚动无约束，且 默认随整个 table 一起滚动。常见错误是以为套个 div class="table-responsive" 就能固定表头——实际完全没效果。

• position: sticky 对 无效（浏览器不支持直接对 设 sticky）
• Bootstrap 5+ 的 .table 类未包含任何滚动隔离逻辑
• 若表格行数多、内容高，单纯设 max-height 会导致 溢出而表头仍不固定

  用 position: sticky + 单独控制（推荐）

  核心思路：放弃对 整体设 sticky，改为对每个 设置 position: sticky; top: 0，并确保父容器有明确高度和 overflow-y: auto。

  • 必须给 外层包一层带 max-height 和 overflow-y: auto 的 div
    每个

    需设 position: sticky; top: 0; background: white; z-index: 10（否则滚动时文字被盖住） 为避免列宽错乱，建议所有	和	显式设 min-width 或用 table-layout: fixed Bootstrap 的 .table 类可保留，但需额外覆盖默认样式 <div style="max-height: 400px; overflow-y: auto;"> <table class="table table-sm"> <thead><tr> <th style="position: sticky; top: 0; background: #fff; z-index: 10; min-width: 120px;">ID</th> <th style="position: sticky; top: 0; background: #fff; z-index: 10; min-width: 200px;">用户名</th> <th style="position: sticky; top: 0; background: #fff; z-index: 10; min-width: 150px;">状态</th> </tr></thead> <tbody> <tr> <td>1</td> <td>admin</td> <td>active</td> </tr> <!-- 更多行... --> </tbody> </table> </div> 兼容性与移动端适配要点 Chrome/Firefox/Edge 均支持 position: sticky，但 Safari（尤其 iOS ≤14.5）对 table 内部元素支持不稳定，容易失效。 VPS Bootstrap 从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。 下载 不要依赖 sticky 在 iOS 旧版 Safari 上工作，可降级为 JS 监听滚动后动态切换 fixed 类 移动端小屏下，列太多会挤在一起，建议配合 .table-responsive 做横向滚动，同时保持纵向 sticky —— 即外层再套一层 div.table-responsive 如果用了 Bootstrap 5 的 data-bs-spy="scroll" 或其他滚动插件，可能干扰 sticky 行为，优先关闭或隔离作用域 真正麻烦的不是写法，而是当表格有合并单元格（rowspan/colspan）、动态列宽计算、或嵌入了 input/select 表单控件时，sticky 容易错位或遮挡。这种场景下，不如直接用 DataTable 或 AG Grid 这类专业表格库——它们内置了 robust 的固定表头逻辑，比手搓 CSS 更省心。