thead是语义、滚动、打印和无障碍的起点，必须位于tbody前且仅含tr/th；混入td或文本将破坏列语义；多级表头须用colspan/rowspan嵌套于thead内；sticky需tbody设max-height+overflow-y协同；tfoot应置于tbody前以支持跨页打印。

必须用 thead，不是“加个标签就完事”，而是语义、滚动、打印、无障碍的起点——没它，position: sticky 在 Safari 里大概率失效，屏幕阅读器会把第一行数据当成表头读。

thead 必须写在 tbody 前面，且只能放 tr 和 th

浏览器解析顺序决定行为：DOM 中 thead 必须紧接在 caption 和 colgroup 之后、tfoot 之前，tbody 才能出现在最后。这不是“推荐写法”，是 HTML 规范强制要求的解析逻辑。

• thead 里混进 td 或直接写文本？屏幕阅读器无法识别列语义，scope="col" 失效，ARIA 表格导航会跳过整列
• 多级表头要用 colspan/rowspan 嵌套，但所有 th 仍必须在 thead 内部，不能拆到 tbody 里“模拟”
• 哪怕只有一行表头，也必须包在 thead 里——否则 JS 操作 table.rows 时，rows[0] 可能指向数据行而非标题

固定表头滚动时，thead 单独设 sticky 不够

只给 thead 加 position: sticky; top: 0，而 tbody 没约束，滚动会失效或错位。关键在于父子容器协同控制：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• tbody 必须设明确高度（如 max-height: 400px）+ overflow-y: auto，否则内容撑开整个表格，sticky 无滚动触发点
• table 推荐用 table-layout: fixed，配合列宽（如 th:first-child { width: 200px }），避免 tbody 滚动时列宽被内容撑开、与 thead 错位
• 某些旧版 Safari 对 thead 的 sticky 支持不稳定，更稳妥的做法是把 thead 和 tbody 分离为两个独立 table，用 CSS 对齐列宽——牺牲一点语义，换稳定渲染

tfoot 要写在 tbody 前面，不是视觉底部

HTML 规范允许甚至推荐把 tfoot 放在 tbody 之前，这样浏览器能提前知道页脚结构，边加载数据边渲染页脚占位，打印时也能跨页重复显示汇总行。

• DOM 顺序：thead → tfoot → tbody；渲染结果仍是表头→数据→页脚，顺序不变
• 如果把 tfoot 放在 tbody 后面，某些打印引擎（如 Chrome PDF 导出）可能只在最后一页输出页脚，而不是每页都带“合计”
• tfoot 里同样只能用 tr + td 或 th（用于汇总列名），不能放按钮、链接等交互元素——它语义上是“全表摘要”，不是操作区

真正麻烦的从来不是怎么写 thead，而是写完之后发现 tbody 里某一行 td 数量和 thead 对不上——列数不一致会导致可访问性检测失败、JS 表格排序错乱、甚至某些 CSS grid-column 布局直接崩溃。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！