thead 必须包裹表头，否则语义丢失、滚动固定失效、打印跨页不重复、屏幕阅读器读错结构；它须与 tbody 配对使用，且 tfoot 必须置于 thead 之后、tbody 之前。
必须用 thead 包裹表头，否则语义丢失、滚动固定失效、打印跨页不重复、屏幕阅读器读错结构——这不是可选项，是现代表格的底线要求。
为什么thead不能只靠th撑场面
很多人写表格只用 th 放第一行，但没包 thead。这会导致：浏览器自动补一个隐式 tbody，但不会补 thead；CSS 里想用 thead { position: sticky; top: 0; } 完全无效；打印时表头只在第一页出现；辅助技术把第一行当成普通数据行读出来。
真正起作用的是标签层级，不是单元格类型。哪怕你全用 td，只要包在 thead 里，它就是语义上的表头。
thead 必须和 tbody 配对使用
单独写 thead 没意义，它必须和 tbody（哪怕空的）一起出现在 table 内。浏览器会容忍缺失，但 JS 操作或样式控制会出问题：
-
document.querySelector('table').tHead返回null如果没显式写thead -
table.rows仍包含所有行，但table.tBodies[0].rows才是你想要的数据行集合 - 用
display: block控制tbody滚动时，thead必须存在且未被破坏，否则列宽崩塌
tfoot 的位置陷阱：必须写在 tbody 前面
HTML 规范明确要求 tfoot 应放在 thead 之后、tbody 之前。虽然视觉渲染不受影响，但有两个硬伤：
- 浏览器会优先加载并渲染
tfoot，这对大表格有性能价值；但如果你把它写在tbody后面，JS 通过table.tFoot获取到的 DOM 节点位置和实际 HTML 顺序不一致 - 可访问性工具（如 NVDA、VoiceOver）依赖这个顺序识别“这是汇总行”，放错位置会导致读成“最后一行数据”
- 多个
tbody共享同一个tfoot，不能为每个分组配独立页脚
固定表头时thead + tbody 的 display 组合很关键
想实现滚动时表头不动，常见错误是只给 thead 加 position: sticky。真正可靠的做法是：
- 保持
thead默认的display: table-header-group - 给
tbody设display: block; max-height: 400px; overflow-y: auto; - 但此时
tr和td会变成block，必须手动重置：tr { display: table-row; }，td, th { display: table-cell; }，再配合table-layout: fixed锁列宽 - 漏掉任意一项，列就对不齐——这是最常被忽略的三连坑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
