table里不能放div，因浏览器只允许thead、tbody、tfoot作为子元素，其他标签会触发自动修复导致DOM错乱；嵌套table需重置border-collapse、width等样式；替代方案包括details/summary、colspan+独立table、CSS Grid/Flex。
直接在 <tr> 里写 <code><table> 是无效的，浏览器会把它踢出表格结构——你写的代码和最终 DOM 完全不是一回事。
<h3>为什么 <code><tr> 里不能放 <code><table><p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><td> 和 <code><th>。任何其他标签（包括 <code><table>）都会触发自动修复机制，常见后果包括：
<ul>
<li>
<code>document.querySelector('table.nested') 返回 null，因为节点被移出了原位置
tr > table 写的 CSS 完全不生效<td> 里嵌 <code><table> 必须重置哪些样式
<p>子表默认继承父表样式，尤其当父表用了 <code>border-collapse: collapse（Bootstrap、多数 reset.css 默认启用），子表边框会消失或加倍。必须显式覆盖：
- 子表加
border-collapse: separate（不是 inherit，也不是不写）
- 避免用
width: 100%，改用 max-width: 100% + overflow-x: auto，尤其父表启用了 table-layout: fixed 时
- 子表内
<th> 默认加粗居中，建议用类名隔离，例如 <code>.child-table th { text-align: left; font-weight: normal; }
- 为子表单独设
font-size（如 0.875em），避免字体继承放大
比嵌套 <table> 更稳的三种替代方案
<p>多数所谓“嵌套需求”，本质是“点击展开详情”或“视觉分组”，硬塞子表反而增加维护成本：</p>
<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><details></details> + <table>：零 JS、语义清晰、无障碍友好，<code><summary></summary> 可被读屏软件识别，键盘可聚焦切换
- 用
colspan 拉通整行后放独立 <table>：适合“某行下方紧贴展示子数据”的场景，避免单个 <code><td> 被撑开导致列宽错乱
<li>用 CSS Grid 或 Flex 模拟表格视觉效果：当嵌套只为对齐而非真正需要表格语义（如导出、排序），这种方式更轻量、响应式更可控</li>
<p>真正难的不是怎么写多层 <code><table>，而是判断这个结构是否真需要嵌套——很多时候，<code><details></details> 或 Grid 就是更干净的答案。
border-collapse: separate（不是 inherit，也不是不写）width: 100%，改用 max-width: 100% + overflow-x: auto，尤其父表启用了 table-layout: fixed 时<th> 默认加粗居中，建议用类名隔离，例如 <code>.child-table th { text-align: left; font-weight: normal; }
font-size（如 0.875em），避免字体继承放大比嵌套 <table> 更稳的三种替代方案
<p>多数所谓“嵌套需求”，本质是“点击展开详情”或“视觉分组”，硬塞子表反而增加维护成本：</p>
<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><details></details> + <table>：零 JS、语义清晰、无障碍友好，<code><summary></summary> 可被读屏软件识别，键盘可聚焦切换
colspan 拉通整行后放独立 <table>：适合“某行下方紧贴展示子数据”的场景，避免单个 <code><td> 被撑开导致列宽错乱
<li>用 CSS Grid 或 Flex 模拟表格视觉效果：当嵌套只为对齐而非真正需要表格语义（如导出、排序），这种方式更轻量、响应式更可控</li>
<p>真正难的不是怎么写多层 <code><table>，而是判断这个结构是否真需要嵌套——很多时候，<code><details></details> 或 Grid 就是更干净的答案。
