thead 是表格结构的硬性基础设施而非装饰，必须作为 table 的直接子元素且顺序正确，否则导致 sticky 失效、打印无表头、dom api 异常、屏幕阅读器语义断裂等上线即触发故障。
thead 不是“让表头看起来更专业”的装饰标签，而是表格结构的硬性基础设施。漏掉它，position: sticky 会静默失效、打印跨页无表头、table.tBodies 返回空数组、屏幕阅读器读不出列关系——这些不是调试问题，是上线即触发的故障。
thead 必须是 table 的直接子元素，且顺序不可错
浏览器只认 table > thead 这一层嵌套。任何中间包裹（比如 <div class="header-wrapper"><thead></thead></div>）都会被 DOM 解析器忽略或自动“修复”成无效结构，导致语义断裂。
- 服务端模板（如 React SSR 或 PHP 渲染）中，条件判断必须确保
thead分支始终命中；一旦分支未执行，整个表格就失去语义锚点 - DOM 顺序必须是：
caption和colgroup（如有）→thead→tfoot→tbody；哪怕你用 CSS 把tfoot渲染在底部，它在 HTML 中也得写在tbody前面 - Safari 旧版和部分读屏软件依赖这个顺序解析；
tbody写在最前，可能跳过thead或重复播报
thead 里只能放 tr，tr 里必须用 th，不能塞 td
th 表达的是“列定义”，td 是“数据单元格”。把 td 塞进 thead 虽然能渲染出文字，但语义已断裂：
- 屏幕阅读器不会把它当列标题处理，
scope="col"属性完全无效 - DataTables、Ag-Grid 等库无法自动识别可排序列，
aria-label也无法补救 - 多级表头（如“销售额”下分“Q1”“Q2”）可用
colspan/rowspan嵌套，但顶层容器仍是thead，且所有直接子tr中的单元格都必须是th
动态操作 tbody，别碰 thead
对 table 直接调用 insertRow() 或遍历 rows 集合，会混入 thead 和 tfoot 的行，极易插错位置甚至破坏结构：
- 增删数据应限定在
tbody上：document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>') - 安全获取数据行：用
tbody.querySelectorAll('tr')或table.tBodies[0].rows，而非table.rows - JS 动态插入时，必须用
table.appendChild(document.createElement('thead'))，而不是先 append 到某个div再塞进table
sticky 固定表头失效？检查 tbody 是否限制了高度和 overflow
仅给 thead 加 position: sticky; top: 0 不够。tbody 必须配合约束，否则滚动无效或布局塌陷：
-
tbody需设固定高度（如max-height: 400px）并启用溢出：overflow-y: auto - 若用了
display: block让tbody可滚动，记得补回表格布局：tr { display: table-row; }、td, th { display: table-cell; } -
thead依赖其作为最近的块级祖先容器实现 sticky；嵌套后，sticky 失效且无报错提示
最容易被忽略的其实是 DOM 顺序和元素层级——它们不是样式细节，而是浏览器解析、辅助技术识别、JS 操作和打印行为的底层契约。写错一行结构，后面所有功能都可能无声崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
