嵌套超过2层就该警觉：html表格虽无硬性层数限制，但超2层会致渲染变慢、fcp延迟300ms以上；必须扁平化处理，子表最多1层嵌套，且须合法置于td/th内，避免dom修正和样式错乱。
嵌套超过2层就该警觉
HTML表格本身没有硬性嵌套层数限制，但浏览器解析和渲染会明显变慢。当嵌套深度超过2层（比如 <td><table><tr><td><table>...</table></td></tr></table></td>），DOM创建、样式继承回溯、布局上下文生成开销开始非线性上升。移动端首屏渲染时间（FCP）可能延迟300ms以上，用户能明显感知卡顿。
- 检查实际嵌套深度：在 Chrome DevTools → Elements 面板右键任意
<td> 节点 → Show DOM properties，看 <code>depth 属性值 <li>首屏关键表格必须扁平：把主表数据直接放在 <code><tbody> 下一级，子表最多嵌套1层（即只允许 <code><td> 内含一个 <code><table>） <li>别用多层 SSR 模板包裹：例如 Nunjucks 或 EJS 里嵌套 include 块生成表格，容易无意中打出3～4层 <code><div><table><tbody><tr><td>...</td></tr></tbody></table></div> 结构 - 唯一合法入口：子表必须完整写在某个
<td> 或 <code><th> 的内容区域里，中间不能穿插其他标签（比如 <code><div> 包裹） <li>如果需要视觉上“跨列展开”，先用 <code>colspan="3" 合并单元格，再把子表放进这个宽单元格 - 必须显式重置子表：
table.child-table { border-collapse: separate; } - 别用
width: 100% —— 改用 <code>max-width: 100%; overflow-x: auto <th> 在子表里默认加粗居中，容易和父表冲突，建议统一加类名隔离，例如 <code>.child-table th { font-weight: normal; text-align: left; } <li>注意：<code>width="auto" 是合法的 <code><col> 值，但只能在子表里单列使用；多列设 auto 会让 <code>table-layout: fixed 行为退化回 auto- DOM 扁平：不会触发浏览器自动修正结构，
document.querySelector('.child-table') 总能拿到 - CSS 干净：子表样式只作用于
.child-table，不继承父表任何规则 - 打印友好：折叠时子表不输出，展开时才渲染，PDF 导出逻辑可控
- 响应式稳定：不需要监听 resize 或 scroll，也不用预设行高
为什么里不能放这不是兼容性问题，是 HTML 规范的硬约束：<tr> 只接受 <code><td> 和 <code><th> 作为直接子元素。一旦你写成 <code><tr><table>...</table></tr>，浏览器会立刻修正 DOM——要么把 <code><table> 移出父 <code><table>，要么塞进隐式 <code><tbody>，结果就是 JS 查不到节点、CSS 选不到目标、打印样式错乱。
<ul>
<li>常见翻车现象：<code>document.querySelector('table.nested') 返回 <code>null；子表格显示在主表上方或下方；给 <code>tr > table 写的 CSS 完全不生效
border-collapse 和 width 的连锁坑
父表用了 border-collapse: collapse（Bootstrap 默认、多数 UI 库默认），子表会继承它，导致边框消失或加倍粗细；同时若子表设了 <code>width: 100%，在 <code>table-layout: fixed 的父表下，它会无视 <code><col> 宽度声明，强行撑开父单元格。
嵌套不是万能解法， 更轻量
80% 的“嵌套需求”其实是“点击展开详情”。硬塞子表进去，样式难调、打印异常、屏幕阅读器无法识别折叠状态，还拖慢首屏。而 <details> 是零 JS、语义清晰、无障碍友好的原生方案。</details>
真正要嵌套时，只在数据强绑定且不可交互的场景下用（比如邮件模板、导出 PDF 的报表），并且严格控制在2层以内。其他情况，优先用 <details> + <code>flex/grid 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
