thead是表格语义化与功能实现的刚性结构锚点：必须作为table直接子元素，包裹含th的tr，否则导致固定表头失效、打印无跨页表头、js操作出错及屏幕阅读器语义断裂。
必须用 thead，不是“可选增强”，而是结构分界刚需。 省略它会导致滚动固定失效、打印跨页无表头、JS 获取 tBodies 出错、屏幕阅读器语义断裂——这些不是边缘问题，而是上线后立刻暴露的硬伤。
为什么 thead 必须是 table 的直接子元素？
浏览器解析时，若 thead 被嵌套在 div 或其他非表格容器中，会直接被忽略或“修复”成无效 DOM；position: sticky 也依赖它作为 sticky 容器的最近块级祖先。常见错误包括：
- 把
thead套在div class="header-wrapper">里 - 用 JS 动态插入时漏掉
thead，只 appendtr到table - 服务端模板里条件渲染
thead，但分支遗漏导致缺失
正确结构只有一层： <table>
<thead><tr><th>...</th></tr></thead>
<tbody>...</tbody>
</table>
th 放错位置的三种典型现象
th 必须在 tr 内，且该 tr 必须在 thead 内。放错位置会直接降级为普通数据单元格：
- 直接写在
<table> 下（无 <code>tr包裹）→ 浏览器自动补tbody，th变成td行为 - 塞进
tbody第一行 → JS 排序库（如 DataTables）不识别为标题行，scope属性失效 - 用
td写表头再靠 CSS 加粗 → 屏幕阅读器读不出标题语义，“张三 28 北京”没有“姓名：张三”关联 - 父容器不能有
overflow: hidden、transform、will-change—— 它们会创建新层叠上下文，切断 sticky 链路 - 旧版 Safari（≤15.6）对
thead+sticky渲染不稳定，稳妥做法是给th单独设position: sticky; top: 0; -
z-index必须显式设置（哪怕只是1），否则在复杂布局中容易被遮挡
固定表头时 thead 不生效？先查这三点
CSS position: sticky 对 thead 的支持有隐性前提：
最小可用样式：
th { position: sticky; top: 0; background: white; z-index: 10; }
打印分页时表头不重复？检查 thead 是否完整且唯一
浏览器打印引擎依赖 thead 自动跨页重复表头，但有两个隐藏条件：
- 一个
table中只能有一个thead；多个会被忽略，仅第一个生效 -
thead内必须至少含一个tr，且该tr不能是空的（哪怕只写<th></th>也不行） - 如果用了
display: grid或flex重排表格，原生打印逻辑完全失效——别这么干
真正影响交付质量的，往往不是“能不能显示”，而是“在打印、滚动、读屏、JS 操作这四个场景下是否一致可靠”。thead 就是那个一损俱损的锚点。
