table的合法直接子元素仅限caption、colgroup、thead、tbody、tfoot和tr；tr必须为table或其内部表头/主体/页脚的直接子元素，不可嵌套于div等容器中，否则触发浏览器自动纠错导致布局与逻辑异常。
table 里只能直接放 caption、colgroup、thead、tbody、tfoot 和 tr
浏览器对 table 的 DOM 结构非常严格：tr 必须是 table 或 tbody/thead/tfoot 的**直接子元素**，不能套在 div、span、section 甚至空格文本里。否则会触发「自动纠错」——浏览器悄悄把非法嵌套的 tr 提到 table 外面，或塞进隐式 tbody，导致布局错乱、CSS 选择器失效、JS 拿不到预期节点。
- 错误写法：
<table><div><tr><td>…</td></tr></div></table>→tr被踢出table - 正确骨架：
<table><tbody><tr><td>…</td></tr></tbody></table>（tbody可省略，但建议显式写出） - 想加逻辑分组？用
<tbody class="group-a">或<thead>，别用div
tr 下只能直接放 th 或 td，不能套容器
tr 是行级语义容器，它的子元素只能是单元格（th 或 td）。任何在 tr 里包裹 div、span、article 来「组织内容」的行为，都会破坏表格语义，且可能让屏幕阅读器误读、打印样式异常。
- 错误：
<tr><div class="cell-wrapper"><td>内容</td></div></tr>→div会被浏览器忽略或移到tr外 - 正确：
<tr><td class="cell-wrapper">内容</td></tr>→ 样式和交互逻辑全写在td上 - 需要复杂内嵌结构？
td内部可以自由放div、img、button等，只要不越级
多层表格嵌套：用 td 当「画布」，别碰 table 套 table
真要嵌套表格（比如某单元格展示子数据），唯一合法位置是 td 或 th 内部。但要注意：table 嵌套本身会显著增加渲染开销，且可访问性差；现代场景更推荐用 CSS Grid/Flex 替代。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 允许：
<td><table><tr><td>子表内容</td></tr></table></td> - 禁止：
<tr><table><tr><td>…</td></tr></table></tr>→table不是tr的合法子元素 - 性能提示：嵌套超过 2 层时，Chrome DevTools 的 Layers 面板常显示「Composite layer」激增，滚动卡顿明显
动态生成表格时，innerHTML 容易踩坑
用 JS 拼接字符串赋值给 table.innerHTML 时，如果字符串含非法嵌套（比如漏了 tbody、多写了 div），浏览器解析后 DOM 结构可能和预期完全不同。
立即学习“前端免费学习笔记（深入）”；
- 反例：
table.innerHTML = "<tr><td>A</td></tr>";→ 浏览器自动补<tbody>，但你 JS 里没声明，后续table.tBodies[0].rows才能取到 - 推荐：
const tr = table.insertRow(); const td = tr.insertCell(); td.textContent = "A";—— 原生 API 强制遵守规范 - 框架用户（React/Vue）：确保 JSX/模板中
tr父级是table或tbody，别用v-for直接包tr在div里
tr，Shadow DOM 或属性劫持就可能让浏览器无法识别其语义位置——这时候 display: table-row 往往比硬套标签更可控。 
