thead 必须与 tbody 显式共存才能正确解析，单独使用会被浏览器自动补全或忽略；需用 th 而非 td，推荐添加 scope 属性以保障语义和可访问性；滚动固定表头需 css 配合 display 重置或 sticky，框架中注意避免 innerhtml 导致 thead 被剥离。

THEAD 必须和 TBODY 配合使用才有效

单独写 <thead> 标签但不包裹在完整表格结构里，浏览器会自动补全甚至忽略它——<code><thead> 不是装饰性标签，而是语义容器，必须与 <code><tbody>（以及可选的 <code><tfoot>）共存才能被正确解析和样式化。 <p>常见错误是只写：<br><code><table><thead><tr><th>Name</th></tr></thead></table>
这会导致后续 <tr> 被浏览器塞进隐式 <code><tbody>，实际 DOM 结构错乱，CSS 选择器如 <code>thead th 可能失效。

• 正确结构必须显式写出 <tbody>：<code><table> <thead><tr><th>Name</th></tr></thead> <tbody><tr><td>Alice</td></tr></tbody> </table>
• 如果表格有页脚，<tfoot> 应放在 <code><tbody> 之后，顺序固定：<code>thead → tbody → tfoot
• 多个 <tbody> 是合法的（比如按日期分组），但只能有一个 <code><thead> <h3>滚动长表格时 THEAD 固定需配合 CSS 和 tbody overflow</h3> <p>单纯加 <code><thead> 不会让表头在滚动时悬停——这是 CSS 控制的行为。关键在于：让 <code><tbody> 独立滚动，同时保持 <code><thead> 在视口内静止。 <p>典型做法是给 <code><table> 设定固定高度，<code><tbody> 设置 <code>display: block; max-height: 300px; overflow-y: auto;，再把 <thead> 的 <code>display 显式设为 table-header-group（否则会被 block 模式破坏）。
  • 必须重置 <thead> 和 <code><tbody> 的 <code>display 值，否则默认 table 布局会被打断
  • Chrome/Firefox 支持 position: sticky 直接作用于 <th>，但需父级 <code><thead> 有 <code>display: table-header-group，且不能有 transform 或 overflow 干扰
  • IE 完全不支持 sticky，只能靠 JS 滚动监听 + 动态 class 切换，或改用 wrapper div 模拟滚动区域

  THEAD 里不能放 TD，TH 也别漏 scope 属性

  <thead> 内部的单元格必须用 <code><th>，不是 <code><td>。虽然浏览器不会报错，但语义错误会影响屏幕阅读器识别——它会把表头当普通数据读，丧失“这一列叫什么”的上下文。 <p>更隐蔽的问题是 <code><th> 缺少 <code>scope 属性。当表格结构复杂（比如多级表头、跨行跨列），仅靠位置推断关联性不可靠。

  • 单层表头直接写：<th scope="col">Price</th>（表示该单元格是列标题）
  • 如果是行标题（如第一列是 ID），用 scope="row"
  • 避免依赖 colspan/rowspan 自动推导；辅助技术可能无法准确映射数据单元格到对应表头
  • 验证方法：用 Chrome 开发者工具检查 AX Tree，确认 headerCells 是否包含预期节点

  服务端渲染或 JS 动态生成时 THEAD 容易被框架抹掉

  React/Vue 等框架在 JSX 或模板中写 <thead> 没问题，但若用字符串拼接 HTML（比如后端模板或 <code>innerHTML），部分环境会自动剥离或重排 <thead> —— 尤其当内容为空或含非法嵌套时。 <p>例如 Vue 的 <code>v-html 渲染：<div v-html="'<table><thead><tr><th>A</th></tr></thead><tbody><tr><td>1</td></tr></tbody></table>'>，某些版本会丢掉 <thead>。

  
  Wechat HTML Publisher
  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
  下载
  • 优先用框架原生 table 组件或虚拟 DOM 渲染，而非字符串注入
  • 若必须用 innerHTML，插入后手动检查 table.querySelector('thead') 是否存在
  • SSR 场景下，Node.js 的 DOM 解析器（如 jsdom）对 <thead> 支持不一，建议用 <template> 标签包裹原始 HTML 再克隆

  真正麻烦的是合并单元格与 THEAD 的交互：一旦 <th> 用了 rowspan，后续 <tbody> 的行数计算就容易出错，滚动固定时表头错位几乎必然发生——这时候就得放弃纯 CSS 方案，老老实实上 JS 计算偏移量。

  ">