必须用 tbody 包裹数据行，因浏览器虽自动补隐式 tbody，但显式声明才能确保 CSS 选择器生效、JavaScript 正确获取 rows、打印时页脚跨页重复；tbody 必须为 table 直接子元素且顺序固定为 thead→tfoot→tbody，禁止嵌套非 tr 元素，允许多个 tbody 用于逻辑分组但影响性能。
为什么必须用 tbody 包裹数据行，而不是直接写在 table 里
浏览器会自动为没被 thead 或 tfoot 包裹的 tr 补上隐式 tbody，但显式写出才能获得语义控制权。不写 tbody 会导致：CSS 选择器如 tbody tr:nth-child(odd) 失效；JavaScript 操作 document.querySelector('tbody').rows 返回 null；打印长表格时页脚无法跨页重复显示。
tbody 的嵌套规则和常见错误写法
它必须作为 table 的直接子元素，且顺序固定为 thead → tfoot → tbody。以下写法全错：
-
<table> <tbody><tr><td>...</td></tr></tbody> <thead>...</thead> </table>（顺序颠倒） -
<table> <caption>标题</caption> <tbody>...</tbody> </table>（caption必须在最前，但不影响tbody位置） -
<tbody><div>...</div></tbody>（tbody内只能有tr，不能塞div或文本节点）
多个 tbody 的实际用途和性能影响
一个表格允许多个 tbody，不是语法错误，而是设计用来逻辑分组。比如按年份拆分销售数据：
<table> <thead><tr><th>月份</th><th>销售额</th></tr></thead> <tbody id="2024"><tr><td>1月</td><td>120万</td></tr></tbody> <tbody id="2025"><tr><td>1月</td><td>150万</td></tr></tbody> </table>
好处是可单独隐藏/显示某组、配合 IntersectionObserver 实现懒加载；但注意：每个 tbody 都会触发一次渲染重排，100 个 tbody 比 1 个含 100 行的 tbody 渲染更慢。
CSS 和 JS 操作 tbody 时最容易忽略的细节
样式上，tbody 默认不占位也不影响布局，但一旦加了 display: block 或 height，就可能破坏表格流式结构；脚本中要注意：
-
tbody.rows是实时集合，删行后长度立刻变化，别缓存length值循环遍历 -
insertRow()方法只能调用在tbody上，不能在table上直接调——哪怕没写tbody，也得先table.querySelector('tbody') || table.appendChild(document.createElement('tbody')) - 用
querySelectorAll('tbody td')能取到所有数据单元格，但querySelectorAll('td')也会把thead th当成td（部分旧浏览器兼容问题）
