tbody是表格结构的强制语义分界线，漏写会导致html验证失败、css样式失效（如斑马纹）、js访问异常（tbodies[0]不可靠）、无障碍体验受损及动态渲染错乱。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<tbody> 不是“可选优化”，而是表格结构的强制语义分界线——漏写它，<code><thead> 一出现，HTML 就会验证失败，CSS 和 JS 的行为也会不可靠。 <h3>不写 <code><tbody> 会导致哪些实际问题 <p>浏览器在解析时，如果看到 <code><thead> 或 <code><tfoot>，就会自动为后续 <code><tr> 创建一个隐式 <code><tbody>；但这个隐式节点无法被 CSS 选择器精准命中，JS 也无法通过 <code>tBodies[0] 安全访问。

• document.querySelector('tbody') 返回 null，哪怕页面里有几十行数据
• tbody tr:nth-child(odd) 这类样式完全不生效，斑马纹失效
• 用 table.insertRow() 插入新行时，可能插到 <tfoot> 后面，破坏表结构 <li>屏幕阅读器可能把表头和第一行数据混为一谈，影响无障碍体验</li> <h3><code><tbody> 必须显式写出的三个硬性场景 <p>只要表格中用了 <code><thead> 或 <code><tfoot>，<code><tbody> 就必须显式包裹所有数据行，且顺序固定：<code><thead> → <code><tfoot> → <code><tbody>。 <ul><li>即使只有纯数据、没表头，也建议显式写 <code><tbody>——避免未来加 <code><thead> 时返工 <li>一个 <code><table> 可以有多个 <code><tbody>（比如按月份分组），但至少一个 <li><code><tbody> 内部必须直接包含 <code><tr>，不能空着，也不能只放注释或文本 <h3>动态渲染时 <code><tbody> 的常见误操作 <p>在 React/Vue 或原生 JS 中批量插入数据，最容易把 <code><tbody> 放错位置。 <ul><li>错误：在循环里每次渲染一个 <code><tbody>（如 <code>v-for="item in list" :key="item.id" 包着 <tbody>）→ DOM 出现多个 tbody，语义混乱 <li>正确：外层单个 <code><tbody>，循环只包 <code><tr><li>用 <code>innerHTML 替换整个主体时，字符串必须以 <tr> 开头，否则浏览器会自动套一层 <code><tbody>，造成嵌套错乱 <li>JS 添加新行：永远用 <code>document.querySelector('tbody').insertAdjacentHTML('beforeend', '...')，别直接操作 table

固定表头滚动时 <tbody> 的关键约束 <p>仅给 <code><thead> 加 <code>position: sticky 不够，<tbody> 必须配合限制高度与溢出行为，否则滚动区域会塌陷或错位。 <ul><li>必须设 <code>max-height + overflow-y: auto，height 属性在 <tbody> 上无效 <li>列宽需靠 <code>table-layout: fixed + 显式设置 <th>/<code><td> 的 <code>width，否则滚动时表头和主体列不对齐

<tbody> 上的 <code>tr:hover 不会误触 <thead>，这是它作为独立语义区块的天然优势 <p>最常被忽略的是：哪怕你只写了一行数据，只要用了 <code><thead>，<code><tbody> 就不是“锦上添花”，而是结构底线——它不改变视觉，但决定了代码能不能被正确解析、维护和交互。</tbody>

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