直接给thead加sticky-top无效，因其display为table-header-group，浏览器不支持sticky定位；必须对th设置position: sticky; top: 0; z-index: 1070; background-color，并确保父容器有max-height和overflow-y: auto。
直接给 <thead> 加 <code>sticky-top 为什么无效
因为 <thead> 是表格格式化上下文的一部分，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>对其应用 <code>position: sticky 时会忽略——它被 display: table-header-group 锁死，不响应 sticky 行为。你加了 sticky-top 类，DevTools 里能看到样式，但 computed 值里 position 实际是 static。
常见错误现象包括：<thead> 完全不动、滚动到一半突然消失、或只在部分列上“半固定”。
<ul><li>别试图对 <code><thead> 或 <code><tr> 设置 <code>position: sticky
.table-responsive 默认只设 overflow-x: auto，没提供垂直滚动上下文，sticky 根本不触发transform、filter 或 will-change 会切断 sticky 链，导致失效<th> 上写 <code>position: sticky 的实操要点
真正生效的是给每个 <th> 单独设置原生 sticky，且必须配齐三要素：定位、层叠、背景。
<ul><li><code><th> 必须显式声明：<code>position: sticky; top: 0; z-index: 1070;（不能用 z-index: auto）
background-color（哪怕 #fff），否则滚动时文字会透出<div>）需同时满足：<code>max-height: 400px + overflow-y: auto；仅靠 .table-responsive 不够，它不处理垂直滚动
modal 或 offcanvas 里，检查它们是否用了 transform —— 有就抽出来单独滚动，否则 sticky 失效IE / 旧 Edge 下 position: sticky 完全不工作怎么办
IE 所有版本和 Edge ≤18 不支持 position: sticky，没有降级方案能复刻原生行为。强行用 JS 模拟会带来滚动抖动、表头错位、响应式断裂、屏幕阅读器不可读等问题。
- Bootstrap 5 已放弃 IE 支持，若目标环境不含 IE，直接忽略兼容性代码
- 若必须兼容 IE，别硬套 sticky —— 改用分页（
pagination）或虚拟滚动（如react-virtualized）更可靠 - 用
position: absolute + scroll监听模拟的方案，会破坏表格语义，且移动端性能差，不建议上线使用
用 bootstrap-table 插件实现固定表头的注意事项
如果你用的是 bootstrap-table（非原生 Bootstrap Table），固定表头通常靠 bootstrap-table-fixed-header 插件，但它依赖 DOM 结构完整性和初始化时机。
- 必须按顺序引入资源：
jquery→bootstrap.min.js→bootstrap-table.min.js→bootstrap-table-fixed-header.js - 初始化必须在 DOM 加载完成后执行，推荐包在
$(document).ready()里 - 插件内部会创建独立的固定表头容器，若表格父容器有
overflow: hidden或高度未设死，会导致固定区域被裁剪 -
fixedColumns和fixedNumber是bootstrap-table-fixed-columns的参数，不是原生bootstrap-table的，别混用
z-index 冲突、滚动上下文缺失、祖先 transform 干扰——这三个点，任何一个漏掉，sticky 就只是个摆设。
