必须按 thead → tfoot → tbody 顺序编写表格 dom，否则影响 sticky 表头、打印分页、js 获取 tfoot、屏幕阅读器语义；thead 只能含 和 ，需 scope="col"；tfoot 唯一，多 tbody 合法但不可配多个 tfoot。

必须按 thead → tfoot → tbody 顺序写 DOM

浏览器解析表格时，依赖这个顺序提前渲染表头和页脚。哪怕 tfoot 语义上是“脚”，也得写在 tbody 前面。否则：

• 某些旧版 Safari 或 IE 可能忽略 thead 的 position: sticky 行为
• 打印时每页无法自动重复 tfoot 和 thead
• JS 读取 table.tFoot 返回的节点位置可能与 DOM 树不一致
• 屏幕阅读器可能把汇总行误读成数据行

正确的结构只能是：

销售数据汇总

产品	销量
总计	1247
A款	321

thead 里只能放 <tr>，且单元格必须用 <code><th> <p><code>thead 不是“第一行数据容器”，而是列定义区。它的作用是告诉浏览器“这一列叫什么、代表什么”。所以：

• 不能往 thead 里塞 <td>，否则语义断裂，屏幕阅读器不会把它当标题读 <li>每个 <code><th> 应加 <code>scope="col"（列范围）明确作用域
• thead 必须至少包含一个 <tr>，空 <code>thead 会导致 HTML 验证失败
• 如果有跨列表头（如“Q1–Q3 销售”），要用 colspan，但列总数仍需和 tbody 中每行的单元格数对齐

多个 tbody 是合法的，但 tfoot 只能有一个

分组表格（比如按月份/区域拆分数据块）可以用多个 tbody，每个对应一组逻辑数据：


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载

<tbody class="group-q1">...</tbody><tbody class="group-q2">...</tbody>

但注意：

• tfoot 仍是整个 <table> 的页脚，不是每个 <code>tbody 独立配一个
• 浏览器只认第一个 tfoot，后续的会被忽略或解析异常
• 若需要每组内部带小计，得用 <tr class="subtotal"> 放在对应 <code>tbody 内部，而不是靠多个 tfoot

  CSS 控制滚动和打印时，分区失效的常见原因

  固定表头、独立滚动主体、分页重复表头这些能力，全依赖三层标签存在且结构正确：

  • 给 tbody 设了 max-height + overflow-y: auto，但没给 table 设 display: block，滚动会失效
  • thead 加了 position: sticky; top: 0，但父级 table 没设 border-collapse: collapse，可能导致粘性错位
  • 打印预览看不到每页重复的 thead，大概率是它没写在 tfoot 前面，或者漏了 caption（部分浏览器要求 caption 存在才启用智能分页）
  • 列宽不一致：比如 thead 用 colspan="2" 合并两列，但某个 tbody 行只写了 1 个 <td>，浏览器会自动补空单元格，但 CSS 宽度计算就乱了 <p>真正卡住人的往往不是语法，而是 DOM 顺序、列数对齐、以及 <code>caption 这个被很多人跳过的强制前置元素。

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