thead必须显式书写，否则浏览器补全不可控导致样式失效、屏幕阅读器跳过表头；多层表头需用多个tr分层对齐；tfoot必须置于tbody之前；th仅限thead内；sticky固定表头须作用于th而非thead。
thead必须显式书写，不能靠浏览器自动补全
浏览器对缺失 thead 的表格会尝试“修复”，但补全结果不可控：Chrome 可能把第一行 th 塞进自动生成的 tbody，Firefox 可能补空 thead 却不包 tr。最终导致 document.querySelector('thead th') 返回 null，CSS 样式失效，屏幕阅读器跳过表头。
实操建议：
- 所有表格都手动写
<thead><tr><th>...</th></tr></thead>，哪怕只有一行表头 - 服务端模板（如 Vue/React SSR）中，避免用条件判断包裹整个
thead—— 一旦分支未命中，语义就断了 - 检查 DOM：打开开发者工具，确认
thead是table的直接子元素，且内部至少有一个tr
多层表头必须用tr分层，不是靠th堆叠
常见错误是把所有 th 写在同一行，再硬塞 rowspan 和 colspan，结果列数错位、屏幕阅读器读不出层级关系。正确做法是每行表头对应一个 tr，用 colspan 横向合并、rowspan 纵向跨行，确保整行单元格数总和恒为列宽总数。
例如「班级」+「学科（语文/数学）」结构：
<thead>
<tr>
<th rowspan="2">班级</th>
<th colspan="2">学科</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
关键点：
- 第一行
tr中colspan="2"占据两列，第二行tr必须提供两个th来对齐 - 避免写
rowspan="1"或colspan="1"—— 这是默认值，显式写出反而干扰可读性 - 所有
th必须在thead内，tbody中禁止出现th（W3C 验证会报错）
固定表头时，sticky 要加在 th 上，不是 thead 上
给 thead 设置 position: sticky 在所有主流浏览器中都无效。真正起作用的是每个 th 单元格自身，且需满足滚动容器约束。
实操要点：
- 对每个
th单独设position: sticky; top: 0; z-index: 10; background: white; -
tbody必须设max-height和overflow-y: auto，否则sticky没有滚动边界 - iOS Safari 要求父容器（如
table的 wrapper）有明确height或max-height，且每个th必须有显式width（百分比或 px） - 不要给
table设display: block或flex—— 会破坏表格布局和语义
tfoot 必须写在 tbody 之前，顺序错会导致 Safari 和打印异常
HTML 规范强制要求 tfoot 出现在 tbody 之前，不是为了视觉顺序，而是为了让浏览器提前知道页脚内容，用于分页预估和固定渲染。DOM 顺序写错，旧版 Safari 打印时可能丢页脚，部分屏幕阅读器重复播报或跳过。
标准顺序只能是：
注意：
-
tfoot中每行td数量必须与thead或tbody对齐，否则浏览器会自动补空单元格，可能引发样式错乱 - 想让页脚视觉上出现在底部？靠 CSS 控制，比如
tfoot { display: table-row-group; }是默认行为；要“粘底”得用position: sticky+ 容器高度约束 - JS 操作时，用
table.tFoot获取页脚，别依赖 DOM 位置遍历
thead 缺失、tfoot 顺序错、或 th 塞进 tbody，语义就已经断裂——Lighthouse 评分归零，屏幕阅读器读不出列关系，打印跨页无表头，这些故障上线后立刻触发，而不是“等用户反馈才发现”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
