thead 是语义容器而非分组工具，真正实现表头分组依赖 tr+th 与 rowspan/colspan 组合；多行 tr 才能构建多层逻辑结构，单行或非标准结构将导致无障碍失效、打印滚动异常及布局错乱。

thead 本身不“分组内容”，它只是语义容器；真正实现头部结构分组的是 tr + th + rowspan/colspan 的组合，thead 只负责把这一组行标记为“表头区域”。

为什么必须包裹多个才能算“分组”？

浏览器和辅助技术（如屏幕阅读器）只认 thead 内部的 tr 行数来推断表头层级。单个 tr 是扁平表头；两个或以上 tr 才可能构成多层逻辑分组——比如第一行是大类（“销售数据”），第二行是具体字段（“订单量”“成交额”“退货率”）。

常见错误现象：

• 写了两行 th 却没包在 thead 里 → 语义丢失，打印时不重复，滚动时无法固定
• thead 里只放一个 tr，却幻想靠 CSS 实现“视觉分组” → 屏幕阅读器仍读作单层，无障碍失败
• 用 div 套 th 替代 tr → HTML 结构非法，部分浏览器渲染异常

用colspan和rowspan对齐多层表头列数

核心原则：tbody 中每行的 td 数量，必须等于最底层 th 单元格的总列数。中间层 th 通过 colspan 或 rowspan 占位，但不能破坏最终列数一致性。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

实操建议：

• 先确定 tbody 有几列（比如 6 列），再倒推 thead 最底层需 6 个 th
• 上层 th 用 colspan="3" 覆盖下层 3 列，就表示它统领这 3 列
• 像“姓名”这种垂直贯穿的标题，用 rowspan="3"，避免在每一层都重复写
• 别硬凑 colspan 数值——用浏览器开发者工具检查“Elements”面板里实际渲染的列数是否对齐

打印和滚动场景下的真实行为

不是所有浏览器都自动支持 thead 在打印/滚动时复用。它的生效依赖两个隐性条件：

• 表格必须有明确的 tbody（不能只用 table + tr）
• 滚动容器需设 display: block + max-height + overflow-y: auto，且 tbody 需单独设 display: block（此时 thead 必须脱离 table 流式布局，常需额外 wrapper）
• 打印时，Chrome 和 Edge 支持跨页重复 thead，Safari 旧版本可能失效，需加 @media print { thead { display: table-header-group; } }

容易被忽略的一点：thead 里的 th 默认是 display: table-cell，但一旦你给整个 table 加了 display: grid 或 flex，thead 的语义和行为就完全失效了——它只在原生 table 布局中起作用。

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