thead设position: sticky不吸顶是因为其display: table-header-group不在规范支持范围内，真正生效的是每个th必须设position: sticky; top: 0; z-index: 1070; background-color: white，且父容器需有max-height和overflow-y: auto，祖先不能含transform/filter等截断滚动链的属性。
position: sticky 是最直接有效的方案，但必须满足几个硬性条件，否则表头根本不会“粘”住——不是代码写错了，而是环境没配对。
为什么 thead 设了 position: sticky 却完全不吸顶？
常见错误是只给 <thead> 或 <tr> 加样式，而真正起效的必须是每个 <th> 单元格：
-
<th>必须显式声明position: sticky; top: 0;，<thead>层级设 sticky 无效 - 父容器（比如
<div class="table-responsive">）必须有max-height和overflow-y: auto，否则没有滚动上下文，sticky 不触发 - 祖先元素不能有
transform、filter或will-change，这些会创建新层叠上下文，切断 sticky 的滚动链 -
<tr>或<thead>上写了overflow: hidden，会裁剪 sticky 元素的渲染区域
Bootstrap 表格里表头“半固定”或被下拉菜单盖住怎么办？
Bootstrap 的 .dropdown-menu 默认 z-index: 1050，.modal 是 1060，如果 <th> 的 z-index 是 auto 或 100，就会被遮挡：
-
<th>必须设z-index: 1070（不能是auto，也不能太小） - 必须设
background-color: white（或其它不透明色），否则滚动时 tbody 内容会透上来 - 避免把表格嵌在
.modal或.offcanvas里——它们内部默认用了transform，得把表格抽出来单独包一层滚动容器
表头和内容列宽错位、滚动条挤窄了 tbody 怎么办？
当父容器出现垂直滚动条时，<tbody> 宽度会被自动压缩（滚动条占约 17px），但 <thead> 没被压缩，导致列不对齐：
立即学习“前端免费学习笔记（深入）”；
- 给
<thead>加padding-right: 17px（或用calc(100% + 17px)调整宽度） - 设置
table-layout: fixed在<table>上，强制按 th 宽度分配列 - 确保所有
<th>和对应<td>有明确的width或使用min-width统一基准
最容易被忽略的是：sticky 表头依赖滚动容器的“边界完整性”。哪怕只是外层 <div> 多了个 transform: translateY(0)，或者 modal 弹窗用了 transition，都可能让整个 sticky 链失效——这不是浏览器 bug，是规范行为。调试时优先检查祖先元素的 CSS 属性，而不是反复改 <th> 样式。
