tbody是必须显式写出的语义结构节点，省略会导致CSS选择器失效、JS操作错乱、屏幕阅读器误读及打印分页等功能异常。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<tbody>不是可选包装，是必须显式写出的语义结构节点。省略它会导致CSS选择器失效、JS操作错乱、屏幕阅读器误读，以及打印分页和固定表头功能完全不可用。
<h3>为什么<tbody>不能省略
<p>浏览器虽会自动补一个隐式<code><tbody>，但这个节点无法被稳定访问：<code>document.querySelector('tbody')可能返回<code>null>；<code>table.tBodies.length可能是0；<code>tbody tr:nth-child(odd)这类CSS规则直接不生效。
<ul><li>服务端模板（如Django、EJS）中漏写<code><tbody>，动态渲染的<code><tr>会直接挂在<code><table>下，破坏DOM层级
<li>React/Vue里若把<code>v-for>或<code>.map()写在<code><table>内而非<code><tbody>内，会导致每个<code><tr>脱离语义上下文
<li>用<code>table.insertRow()插入新行时，如果没有显式<code><tbody>，行为不可预测——可能插到<code><tfoot>后面，甚至破坏表结构
<h3>多个<tbody>怎么用才合理
<p>多个<code><tbody>不是为了视觉分隔，而是承载逻辑分组数据，比如按季度、状态、区域划分。每个<code><tbody>必须完整包含若干<code><tr>，且列数与<code><thead>严格对齐。
<ul><li>正确：两个<code><tbody class="q1">和<code><tbody class="q2">分别包裹各自季度数据
<li>错误：为每行都套一个<code><tbody>，或把单行拆到两个<code><tbody>里
<li>注意：<code><tfoot>只能有一个，且必须写在所有<code><tbody>之前；多<code><tbody>不能配多个<code><tfoot>
<li>JS操作时可用<code>document.querySelectorAll('tbody.q1 tr')精准筛选某组数据，避免全局遍历
tbody配合CSS滚动和固定表头的关键约束
只给<tbody>设<code>max-height>和<code>overflow-y: auto>是无效的——浏览器默认忽略。要实现主体滚动，必须打破表格默认渲染流。
<ul><li>方案一（推荐）：外层<code><div style="overflow-y: auto; max-height: 400px;">包裹整个<code><table>，保持<code><thead>/<code><tbody>原生显示模式
<li>方案二（需谨慎）：给<code><tbody>加<code>display: block>，但必须同步设置<code>table-layout: fixed>和显式列宽（如<code><col width="120">或CSS中<code>th, td { width: 120px }），否则列宽错位
<li><code>thead th { position: sticky; top: 0; }只在父级<code><table>有<code>border-collapse: collapse>时表现稳定
<li>斑马纹请用<code>tbody tr:nth-child(even) { background: #f5f5f5; }，避免用<code>tr:nth-child(even)——它会把表头也算进去
JS操作tbody时最容易踩的坑
所有动态增删改操作，目标必须明确指向<tbody>，而不是<code><table>本身。DOM结构错位，后续样式和辅助技术就全崩了。<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>
<li>插入新行：用<code>document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>')
tbody.innerHTML = newRowsHTML，比循环<code>removeChild>更安全可靠
document.querySelectorAll('tbody tr')，别用<code>table.rows——后者含<code><thead>/<code><tfoot>里的行
<li>React/Vue中，<code><tbody>必须是静态容器，循环只作用于其内部<code><tr>；切勿让<code>v-for>生成多个<code><tbody><code><tbody>的存在意义不在视觉，而在语义锚点——它是CSS选择器的边界、JS操作的靶心、屏幕阅读器理解“哪些是数据”的唯一依据。一旦漏写或嵌套错位，表面看起来没区别，实际已埋下可访问性、维护性和交互稳定性的隐患。</tbody>
