thead必须包裹tr且不能空着，因为它是语义容器而非装饰标签，HTML规范强制要求其至少含一个tr（如仅含空th），否则会被浏览器忽略或修正，导致表头缺失、屏幕阅读器误读、打印不重复等问题。
thead 不是用来“定义页眉”的视觉容器，而是语义上声明“这部分行属于表头”，浏览器和辅助技术据此理解结构——它本身不带样式、不自动固定、也不等于“页眉”在 UI 上的呈现效果。
为什么 thead 必须包裹 tr，且不能空着？
thead 是语义容器，不是装饰标签。HTML 规范强制要求其内部至少含一个 tr（哪怕这行只放空 th）；否则解析时会被浏览器忽略或修正，导致结构断裂。
常见错误现象：
• 表格渲染后缺失表头行
• 屏幕阅读器跳过列名，直接读数据
• 打印时每页不重复显示标题
正确写法必须是：
<thead>
<tr>
<th>姓名</th>
<th>部门</th>
<th>薪资</th>
</tr>
</thead>
注意：th 是必须的语义选择（比 td 更准确），它自带可访问性角色 columnheader，而 td 在 thead 中会破坏语义。
thead 写在 tbody 前还是后？顺序影响什么？
必须写在 tbody 之前，且推荐把 tfoot 放在 tbody 之前（即 thead → tfoot → tbody）。这不是可选项，而是规范要求的加载优先级逻辑：
• 浏览器能先渲染 thead 和 tfoot，用户不用等几百行数据加载完才看到标题和汇总
• 打印时，thead 和 tfoot 才会在每页顶部/底部重复出现
• 若错写成 tbody 在前，部分旧版打印引擎可能完全忽略重复页眉
错误顺序示例：
• <table><tbody>...</tbody><thead>...</thead></table> —— 结构无效，CSS 与可访问性均受影响
仅用 thead 能让表头固定滚动吗？
不能。thead 只提供语义，不带任何滚动控制能力。所谓“表头固定”，靠的是 CSS 配合 DOM 结构：
• position: sticky 在现代浏览器中可用，但需确保父容器有明确高度+溢出设置，且 thead > tr > th 设置 top: 0
• 更兼容的做法是拆成两个独立 table：一个只含 thead（设为 display: block），一个只含 tbody（设为 display: block + overflow-y: auto），再用 table-layout: fixed 对齐列宽
容易踩的坑：
• 直接对 thead 设 position: fixed —— 会脱离表格流，列宽错位
• 忘记给 th 设置 width 或 min-width —— 滚动时列不对齐
• 在 tbody 里混用 colspan/rowspan —— 破坏列映射关系，固定后错行
立即学习“前端免费学习笔记（深入）”；
长表格中 thead 和 tfoot 的实际分工是什么？
分工不是“谁在上谁在下”，而是语义职责不可互换：
• thead：只放列定义（th），代表“这一列叫什么、单位是什么、是否可排序”
• tfoot：只放全表级汇总（如“总计 ¥124,890”、“平均响应时长 2.3s”），不是某几行的小计
• tbody：唯一允许增删的区域，所有 JS 动态插入/删除行都应操作这里
关键细节：
• tfoot 写在 tbody 前，但视觉上仍显示在底部（浏览器自动重排）
• 若表格无汇总信息，就别加 tfoot —— 强行添加空标签反而干扰可访问性
• 多个 tbody 是合法的（比如按月份分组），但 thead 和 tfoot 各只能有一个
