必须显式书写 ，否则 css 选择器失效、js 无法获取行、屏幕阅读器重复读表头、打印分页错乱；浏览器虽自动补隐式 ，但不可被稳定命中，ssr 或严格模式下 queryselector('tbody') 可能返回 null。
必须显式写出 <tbody>，哪怕只有一组数据——不写它，CSS 选择器会失效、JS 操作拿不到行、屏幕阅读器可能重复读表头、打印分页错乱。
<h3>为什么 document.querySelector('tbody') 有时返回 null</h3>
<p>浏览器确实会为没写 <code><tbody> 的表格自动补一个隐式节点，但它不可被 CSS 或 JS 稳定命中。尤其在 SSR（如 Next.js）或严格解析模式下，<code>document.querySelector('tbody') 可能直接返回 null，而 table.tBodies 长度为 0。
- 验证方式：打开 DevTools → Elements 面板，手动展开
<table>，看是否有显式的 <code><tbody> 节点（不是灰色/斜体的“隐式”提示） <li>修复动作：所有含 <code><thead> 或 <code><tfoot> 的表格，<code><tbody> 必须成对出现、显式书写 <li>小陷阱：Vue/React 中用 v-for 或 map 渲染 <code><tr> 时，别把 <code><tbody> 包在循环里，否则生成多个空 <code><tbody> 标签 <h3>tbody tr:nth-child(even) 斑马纹失效怎么办</h3> <p>伪类失效通常是因为 <code><tr> 没被包裹在显式 <code><tbody> 里，导致 <code>nth-child从整个<table> 的子元素计数（包含 <code><thead> 的 <code><tr>），序号全乱了。 <ul> <li>正确写法：<code><tbody> <tr><td>A</td></tr> <tr><td>B</td></tr> </tbody>，再配tbody tr:nth-child(even) - 错误写法：直接把
<tr> 写在 <code><table> 下，即使有 <code><thead>，也因缺少显式 <code><tbody> 导致计数起点偏移 <li>替代方案：用 <code>tbody tr:nth-of-type(even)更鲁棒，但前提是<tr> 确实都在 <code><tbody> 内 <h3>固定表头滚动时 tbody 的 display: block 带来列宽错位</h3> <p>给 <code><tbody> 设 <code>display: block+max-height+overflow-y: auto是实现固定表头最常用手法，但<tr> 和 <code><td> 会脱离表格布局上下文，列宽不再与 <code><thead> 对齐。 <ul><li>必须加 <code>table-layout: fixed到<table> 上 <li>必须为每个 <code><th> 和对应位置的 <code><td> 设置显式宽度（如 <code>width: 120px或flex-basis） - 不能只设
<th> 宽度而忽略 <code><td>，否则 <code><tbody> 内单元格会按内容撑开 <li>更稳妥的做法：外层套 <code><div style="overflow-y: auto">，只让 <code><tbody> 本身保持 <code>display: table-row-group，避免重写 display服务端渲染或动态插入时 tbody.innerHTML 替换的坑
用
。tbody.innerHTML = '<tr><td>... 替换整个主体时，如果字符串不以 <code><tr> 开头（比如开头有空格、注释或换行），浏览器会自动补一层 <code><tbody>，造成嵌套错乱：</tbody> <tbody></tbody> <tbody><tr>…</tr></tbody>- 安全做法：确保赋值字符串严格以
<tr> 开头，无前置空白或非法字符 <li>推荐替代：用 <code>DocumentFragment或innerHTML = ''后逐个appendChild，避免 HTML 解析歧义 - 注意：React/Vue 中应避免直接操作
innerHTML，优先走虚拟 DOM 更新路径
最常被跳过的细节是 DOM 子元素顺序：
<thead> 必须在源码中出现在 <code><tbody> 之前，<code><tfoot> 必须在 <code><tbody> 之前——顺序错了，打印、流式渲染和部分 JS API（如 <code>table.createTHead()）行为就不可靠。 - 安全做法：确保赋值字符串严格以
