直接用 sticky-top 类不能让 Bootstrap 表格的表头固定，因其仅作用于块级元素，而 <thead> 属表格格式化上下文，受 display: table-header-group 约束，浏览器忽略其 sticky；真正有效的是对 <th> 单独设置 position: sticky; top: 0; z-index: 1070; background-color: white，且外层容器必须设 max-height 和 overflow-y: auto。
直接用 sticky-top 类不能让 Bootstrap 表格的表头固定——它只对块级元素生效，而 <thead> 是表格内部结构，不响应 sticky-top。真正起效的是原生 position: sticky，且必须配合容器约束和层叠控制。
为什么 sticky-top 对 <thead> 无效
sticky-top 是 Bootstrap 封装的 position: -webkit-sticky; position: sticky; top: 0;，但它默认作用于 div、nav 等常规块容器。表格的 <thead> 在渲染时属于表格格式化上下文（table formatting context），其定位行为受 display: table-header-group 约束，浏览器会忽略对其直接设置的 sticky。你加了类，DevTools 里能看到样式，但计算后 position 会被重置为 static。
常见错误现象包括：<thead> 完全不吸顶、滚动时突然消失、或只在部分列上“半固定”。
正确做法：给 <th> 加 position: sticky，不是给 <thead>
Bootstrap 表格（如 table table-striped）的语义结构没变，固定逻辑仍落在单元格层级。必须把 sticky 落实到 <th> 元素本身，并确保父容器提供滚动上下文：
立即学习“前端免费学习笔记（深入）”；
- 外层容器（如
<div class="table-responsive">）需设overflow-y: auto且有明确高度（如max-height: 500px），不能靠内容撑开 -
<th>必须显式写position: sticky; top: 0; z-index: 2;（z-index不能是auto） - 为防文字透出，
<th>必须设background-color（哪怕只是white） - 避免在祖先元素上用
transform、filter或will-change，否则会切断 sticky 的滚动上下文链
z-index 冲突导致表头被遮盖怎么办
Bootstrap 默认会给某些组件（如 dropdown-menu、modal）设高 z-index（如 1050 或 1060），而表格 <th> 的 z-index: 2 会被压在下面。这不是样式没生效，是层叠顺序被覆盖了。
解决方法很直接：
- 把
<th>的z-index提到至少1000以上（比如z-index: 1070） - 确保
<th>的父容器（如<tr>、<thead>）没有overflow: hidden——它会裁剪子元素的sticky渲染区域 - 如果表格嵌在
modal或offcanvas里，检查这些组件是否用了transform，有的话得换封装方式（比如把表格抽出来单独滚动）
移动端 Safari 14 及更早版本不支持怎么办
iOS Safari 14 及更早版本对 left/top 同时生效的 sticky 支持极弱，即使加了所有前提条件，首行可能固定、首列却完全不动。这不是代码写错了，是内核限制。
此时不要硬套 polyfill，降级方案更可靠：
- 用媒体查询检测
@supports not (position: sticky)，对老 Safari 关闭 sticky 样式，改用position: relative+ JS 监听scroll手动更新top - 或者直接放弃双向固定，只保首行（
<th>+top: 0），因为首行 sticky 兼容性好得多（Safari 13.1+ 就支持） - 若必须双向，改用两个独立滚动容器：一个固定表头，一个固定首列，再用 JS 同步
scrollLeft/scrollTop——虽然重，但可控
最易被忽略的一点：Bootstrap 的 table-responsive 默认只设 overflow-x: auto，没管纵向滚动。你要固定表头，必须手动加 max-height 和 overflow-y: auto，否则 sticky 根本没滚动空间可响应。
