必须显式写出<tbody>，否则document.querySelector('tbody')返回null、CSS选择器失效、JS无法获取行、屏幕阅读器重复读表头、打印分页错乱；浏览器虽自动补隐式<tbody>，但非真实DOM节点，SSR或严格模式下不可稳定命中。
必须显式写 <tbody>，哪怕只有一行数据——不写它，JS 拿不到行、CSS 选择器失效、屏幕阅读器读错结构、打印分页错乱。
<h3>为什么 document.querySelector('tbody') 有时返回 null</h3>
<p>浏览器会自动补一个“隐式 <code><tbody>”，但它不是真实 DOM 节点，不能被稳定选中。尤其在 SSR（如 Next.js）、严格模式或 DevTools 刷新后，<code>document.querySelector('tbody') 很可能返回 null，而 table.tBodies.length 是 0。
- 打开 Elements 面板，手动展开
<table>，确认看到的是实线灰色的 <code><tbody> 标签，而不是斜体提示的“implicit tbody”
<ul>只要用了 <code><thead> 或 <code><tfoot>，就必须显式写出成对的 <code><tbody>，顺序必须是 <code><thead> → <code><tfoot> → <code><tbody><ul>React/Vue 中动态渲染时，别把 <code><tbody> 放在循环里（比如 <code>v-for 包着 <tbody>），应只循环 <code><tr>，外层保持单个 <code><tbody>
<h3>tbody tr:nth-child(even) 斑马纹为啥不生效</h3>
<p>伪类失效的根源在于：<code><tr> 没被包裹在显式 <code><tbody> 里，导致 <code>:nth-child() 从整个 <table> 的子元素计数，把 <code><thead> 的 <code><tr> 也算进去了。
<ul>错误写法：<code><table>
<thead><tr>...</tr></thead>
<tr>...</tr>
<tr>...</tr>
</table> —— 这里 <tr> 直接挂在 <code><table> 下，没有 <code><tbody>
<ul>正确写法：<code><tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>，再配 tbody tr:nth-child(even)
- 更鲁棒的替代：用
tbody tr:nth-of-type(even)，但前提是所有数据行都确实在 <tbody> 内，且没混入其他类型节点
<h3>固定表头滚动时 tbody 列宽错位怎么修</h3>
<p>给 <code><tbody> 设 <code>display: block + max-height + overflow-y: auto 是常见做法，但它会让 <tbody> 脱离表格布局流，列宽不再与 <code><thead> 对齐。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>必须给 <code><table> 加 <code>table-layout: fixed
- 必须为每列显式设宽度：用
<col> 元素，或统一给 <th> 和对应位置的 <code><td> 设置相同 <code>width（比如 width: 120px）
- 避免只设
<th> 宽度而忽略 <code><td>，否则 <code><tbody> 内单元格会按内容撑开，破坏对齐
<ul>更稳妥方案：不碰 <code><tbody> 的 <code>display，而是把整个 <table> 包进一个 <code><div style="overflow-y: auto; max-height: 300px;">，让 <code><tbody> 保持原生 <code>display: table-row-group
最常被忽略的点是：多个 <tbody> 不是为了“视觉分段”，而是逻辑分组需要；一旦用了，就得保证每个 <code><tbody> 内的列数和 <code><thead> 一致，否则可访问性和样式都会出问题。</thead>
