<thead>加position: sticky或sticky-top无效，因浏览器规范禁止对display: table-header-group元素启用sticky；必须为每个<th>单独设置position: sticky、top: 0、z-index≥1070和background-color，并确保外层容器有max-height+overflow-y:auto且无transform/overflow:hidden干扰。
直接给 <thead> 加 position: sticky 或 Bootstrap 的 sticky-top 类基本无效——这不是你写错了，而是浏览器根本不支持在表格格式化上下文中对 <thead> 应用 sticky 定位。
为什么 <th> 必须单独设 position: sticky
Bootstrap 4 表格的 <thead> 渲染为 display: table-header-group，这会强制重置 position 为 static，哪怕 DevTools 显示样式已应用。真正能响应 top: 0 的只有单元格级元素：<th>。必须每个 <th> 都显式声明：
-
position: sticky（不能靠父级继承） -
top: 0（值必须是具体长度，不能是百分比或auto） -
z-index: 1070（低于 Bootstrap modal 的1060就会被盖住） -
background-color: #fff（否则滚动时内容会从下方透出）
外层容器必须提供垂直滚动上下文
position: sticky 不是“固定在视口”，而是“固定在最近的可滚动祖先容器顶部”。.table-responsive 默认只设 overflow-x: auto，不触发垂直 sticky。必须手动加约束：
- 包裹
<table>的容器（比如<div class="table-responsive">）要设max-height: 400px（不能只靠height，否则内容溢出会被裁剪） - 同时设
overflow-y: auto（overflow: auto不够，iOS Safari 对overflow解析不一致） - 避免该容器或任何祖先元素有
transform、filter或will-change——这些会创建新层叠上下文，切断 sticky 链
常见失效场景与绕过方式
即使样式全对，也可能因环境干扰失败：
立即学习“前端免费学习笔记（深入）”；
-
<tr>或<thead>上写了overflow: hidden：会裁剪<th>的 sticky 渲染区域，删掉 - 表格嵌在
modal或offcanvas里：这些组件默认用transform动画，得把表格抽出来，单独用<div style="max-height: 400px; overflow-y: auto;">包裹 - 列宽错位：如果用了
table-layout: fixed，确保每列<th>和第一行<td>都有明确width；否则改用min-width+white-space: nowrap - IE11 / Edge ≤18：完全不支持
sticky，无轻量降级方案，要么放弃固定表头，要么换 JS 库（如datatables.net）
兼容性与复杂点收尾
Bootstrap 4 下最稳的路径是：每个 <th> 写内联样式或独立 class，外层容器严格控制 max-height 和 overflow-y，并全程避开 transform。别指望 <thead> 自己“粘住”——它从来就没这个能力。真正难的不是写 CSS，而是排查哪一层祖先悄悄加了 transform 或 overflow: hidden，这种问题往往藏在 modal、tab-pane 或自定义 wrapper 里，DevTools 很难一眼定位。
