嵌套表格必须放在或内，不可直接置于中，否则浏览器会自动修正dom结构导致节点丢失、样式失效、打印错位及无障碍支持失败；正确做法是将完整子表（含）作为单元格内容，并重置子表样式。
嵌套表格只能放在 <td> 或 <code><th> 里，写在 <code><tr> 下会被浏览器自动移出，DOM 结构就乱了——你查不到节点、样式不生效、打印错位，全是因为这一个位置错误。
<h3>为什么 <code><tr> 里不能直接放 <code><table><p>浏览器对 <code><tr> 的子元素有硬性限制：只允许 <code><td> 和 <code><th>。一旦你写成这样：
<pre class="brush:php;toolbar:false;"><tr><table class="nested"><tr><td>数据</td></tr></table></tr></pre>
<p>它就会被“修复”——大概率塞进隐式 <code><tbody> 或直接扔到主表外面。结果就是：
<ul>
<li>
<code>document.querySelector('table.nested') 返回 null
tr > table 写的 CSS 完全不生效正确写法：完整子表必须嵌入 <td> 或 <code><th>
<p>把整个子 <code><table>（包括 <code><thead>、<code><tbody>）作为单元格的内容写进去，不要省略任何语义标签：
<pre class="brush:php;toolbar:false;"><tr>
<td>
<table class="child-table">
<thead><tr>
<th>日期</th>
<th>金额</th>
</tr></thead>
<tbody><tr>
<td>2026-10-05</td>
<td>¥8,200</td>
</tr></tbody>
</table>
</td>
<td>其他列内容</td>
</tr></pre>
<ul><li>子表必须有 <code><thead> 和 <code><tbody>，否则 JS 遍历 <code>table.tBodies[0].rows 可能出错
colspan="3" 合并父单元格，再往里放class="child-table"），避免样式污染主表子表样式必须重置，不能靠继承
父表若用了 border-collapse: collapse（Bootstrap 默认、多数 reset.css 启用），子表边框会消失或变双线——这不是 bug，是 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，防止继承放大导致列宽失控 - 用
<details><summary></summary></details>包裹子表：零 JS、语义清晰、键盘可聚焦、读屏软件可识别 - 用
colspan拉通整行后放独立<table>：适合“某行下方紧贴展示子数据”的强绑定场景 <li>用 CSS Grid 替代：当只是视觉对齐而非真正需要表格语义（比如导出、排序），<code>display: grid更轻量、断点更可控
真要嵌套？先想想有没有更稳的替代方案
90% 的所谓“嵌套需求”，其实是“点击展开详情”。硬塞子表，维护难、无障碍差、响应式崩。更可控的做法：
嵌套超过两层（table > td > table > td > table）几乎必然出问题：JS 节点顺序不可靠、小屏横向滚动不可避免、打印时层级错位——这时候不是代码没写对，而是结构本身就不该这么设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
