直接给<thead>加sticky-top无效，因其属表格格式化上下文，display为table-header-group，浏览器忽略sticky声明；真正有效的是对每个<th>设置position: sticky; top: 0; z-index: 1070; background-color: white，并确保外层容器有max-height和overflow-y: auto。
为什么直接给 <thead> 加 sticky-top 没用
因为 <thead> 是表格格式化上下文的一部分，浏览器会忽略对其设置的 position: sticky（哪怕 DevTools 里能看到样式）。sticky-top 是 Bootstrap 封装的类，只对常规块级元素生效，而表格内部结构（<thead>、<tbody>、<tr>）受 display: table-header-group 等约束，定位行为被重置为 static。
常见错误现象包括：<thead> 完全不吸顶、滚动时突然消失、或只在部分列上“半固定”。
真正起效的做法：给每个 <th> 单独设 position: sticky
固定逻辑必须落到单元格层级。关键不是改语义结构，而是让每个表头单元格自己“粘住”顶部：
-
<th>必须显式写position: sticky; top: 0;，不能依赖<thead>或<tr> - 必须设
z-index: 1070（不能是auto或小数值），否则会被 Bootstrap 的dropdown-menu（z-index: 1050）、modal（z-index: 1060）盖住 - 必须设
background-color: white（或其它不透明色），否则滚动时内容会透上来 - 外层容器（比如
<div class="table-responsive">）必须有max-height和overflow-y: auto，否则没有滚动上下文，sticky不触发
示例片段：
立即学习“前端免费学习笔记（深入）”；
<div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
<table class="table table-striped">
<thead>
<tr>
<th style="position: sticky; top: 0; background: #fff; z-index: 1070;">姓名</th>
<th style="position: sticky; top: 0; background: #fff; z-index: 1070;">邮箱</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>zhang@example.com</td></tr>
</tbody>
</table>
</div>
哪些情况会让 position: sticky 失效
即使样式全对，也可能因环境干扰而失败：
- 祖先元素用了
transform、filter或will-change——这会创建新的层叠上下文，切断sticky所需的滚动链 -
<tr>或<thead>上设置了overflow: hidden——会裁剪子元素的 sticky 渲染区域 - 表格嵌在
modal或offcanvas里，而这些组件默认用了transform动画，得把表格抽出来单独包裹滚动容器 - 父容器高度靠内容撑开（没设
max-height），或只设了overflow-x: auto（table-responsive默认行为），没处理垂直滚动
兼容性与降级提醒
position: sticky 在 Chrome 56+、Firefox 59+、Safari 15.4+ 支持良好，但 IE 和旧 Edge 完全不支持，且无 CSS-only 降级方案。如果项目必须兼容 IE，只能用 JS 方案（如 bootstrap-table + fixedColumns 插件）或结构拆分法（把 <thead> 和 <tbody> 拆成两个独立 <table>，用 colgroup 同步列宽）。
最易被忽略的一点：z-index 冲突不是样式没生效，而是层叠顺序被覆盖；调试时别只看 DevTools 里的 computed position，要检查 z-index 值和所有祖先的层叠上下文是否干净。
