直接用 sticky-top 类不能让 Bootstrap 表格的表头固定，因其仅作用于块级元素，而 属表格格式化上下文，受 display: table-header-group 约束，浏览器忽略其 sticky；真正有效的是对 单独设置 position: sticky; top: 0; z-index: 1070; background-color: white，且外层容器必须设 max-height 和 overflow-y: auto。

直接用 sticky-top 类不能让 Bootstrap 表格的表头固定——它只对块级元素生效，而 是表格内部结构，不响应 sticky-top。真正起效的是原生 position: sticky，且必须配合容器约束和层叠控制。

为什么 sticky-top 对 无效

sticky-top 是 Bootstrap 封装的 position: -webkit-sticky; position: sticky; top: 0;，但它默认作用于 div、nav 等常规块容器。表格的 在渲染时属于表格格式化上下文（table formatting context），其定位行为受 display: table-header-group 约束，浏览器会忽略对其直接设置的 sticky。你加了类，DevTools 里能看到样式，但计算后 position 会被重置为 static。

常见错误现象包括： 完全不吸顶、滚动时突然消失、或只在部分列上“半固定”。

正确做法：给 加 position: sticky，不是给

Bootstrap 表格（如 table table-striped）的语义结构没变，固定逻辑仍落在单元格层级。必须把 sticky 落实到 元素本身，并确保父容器提供滚动上下文：

• 外层容器（如
  ）需设 overflow-y: auto 且有明确高度（如 max-height: 500px），不能靠内容撑开
• 必须显式写 position: sticky; top: 0; z-index: 2;（z-index 不能是 auto）
• 为防文字透出， 必须设 background-color（哪怕只是 white）
• 避免在祖先元素上用 transform、filter 或 will-change，否则会切断 sticky 的滚动上下文链

z-index 冲突导致表头被遮盖怎么办

Bootstrap 默认会给某些组件（如 dropdown-menu、modal）设高 z-index（如 1050 或 1060），而表格 的 z-index: 2 会被压在下面。这不是样式没生效，是层叠顺序被覆盖了。

解决方法很直接：

• 把 的 z-index 提到至少 1000 以上（比如 z-index: 1070）
• 确保 的父容器（如 、）没有 overflow: hidden ——它会裁剪子元素的 sticky 渲染区域
• 如果表格嵌在 modal 或 offcanvas 里，检查这些组件是否用了 transform，有的话得换封装方式（比如把表格抽出来单独滚动）

移动端 Safari 14 及更早版本不支持怎么办

iOS Safari 14 及更早版本对 left/top 同时生效的 sticky 支持极弱，即使加了所有前提条件，首行可能固定、首列却完全不动。这不是代码写错了，是内核限制。

此时不要硬套 polyfill，降级方案更可靠：


CSS
CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
下载
• 用媒体查询检测 @supports not (position: sticky)，对老 Safari 关闭 sticky 样式，改用 position: relative + JS 监听 scroll 手动更新 top
• 或者直接放弃双向固定，只保首行（ + top: 0），因为首行 sticky 兼容性好得多（Safari 13.1+ 就支持）
• 若必须双向，改用两个独立滚动容器：一个固定表头，一个固定首列，再用 JS 同步 scrollLeft/scrollTop ——虽然重，但可控

最易被忽略的一点：Bootstrap 的 table-responsive 默认只设 overflow-x: auto，没管纵向滚动。你要固定表头，必须手动加 max-height 和 overflow-y: auto，否则 sticky 根本没滚动空间可响应。