必须显式用thead包裹表头行，它是浏览器、读屏器、打印引擎和js操作共同依赖的语义锚点；省略或错放位置会导致固定表头失效、打印无跨页表头、排序库无法识别标题、屏幕阅读器读不出列名等硬性故障。

必须用 thead 显式包裹表头行，否则“表头”只是视觉错觉，不是结构事实。 浏览器、读屏器、打印引擎和 JS 操作都依赖它作为语义锚点——漏掉或放错位置，滚动固定失效、打印无跨页表头、排序库找不到标题、屏幕阅读器读不出列名，全都会立刻出问题。

为什么 thead 不能省略，也不能嵌套在 div 里

浏览器解析时，thead 必须是 table 的直接子元素。一旦被包进 div、section 或其他容器，它会被忽略或自动“修复”成无效 DOM（比如被塞进 tbody）。

• JS 执行 document.querySelector('thead') 返回 null，后续逻辑崩掉
• position: sticky 失效：因为 sticky 需要最近的块级祖先，而 div 创建了新层叠上下文，切断链路
• 服务端模板中条件渲染 thead 时，分支遗漏导致整个表格缺失表头结构

th 放错位置的三种典型现象

th 不是“加粗的 td”，它的语义绑定在层级结构上。放错就等于没写。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 直接写在 table 下、没包 tr → 浏览器自动补 tbody，th 被降级为普通 td
• 塞进 tbody 第一行 → DataTables 等库不识别为标题行，scope 属性完全无效
• 用 td + CSS 加粗代替 th → 屏幕阅读器无法建立“姓名 → 张三”的列关联，只读“张三 28 北京”

固定表头时 thead 不生效？先查这三点

常见错误不是代码写得不对，而是被隐性约束卡住。

• 父容器设了 overflow: hidden、transform 或 will-change → 它们会创建新层叠上下文，sticky 失效
• Safari ≤15.6 对 thead + sticky 渲染不稳定 → 改用 th { position: sticky; top: 0; } 更稳妥
• z-index 没显式设置 → 即使只是 z-index: 1，也必须写，否则容易被其他元素遮挡

打印分页时表头不重复？检查 thead 是否完整且唯一

浏览器打印引擎只认一个真实存在的 thead，且它必须满足两个硬条件：

• 一个 table 中只能有一个 thead；多个会被忽略，仅第一个生效
• thead 内必须至少含一个非空 tr（哪怕 <th> </th> 也算，但 <th></th> 可能被某些引擎跳过）
• 用了 display: grid 或 flex 重排表格 → 原生打印逻辑彻底失效，别这么干

真正影响交付质量的，往往不是“能不能显示”，而是“在打印、滚动、读屏、JS 操作这四个场景下是否一致可靠”。thead 就是那个一损俱损的锚点——它看起来最轻，实则最刚性。