嵌套表格必须严格遵循HTML规范，仅允许<thead>、<tbody>、<tfoot>作为<table>子元素，否则触发浏览器自动修复导致DOM错乱；需重置border-collapse、避免width:100%、保持完整语义结构；90%场景推荐用<details>、colspan或CSS Grid替代。
为什么 <tr> 里不能放 <code><table><p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><td> 和 <code><th>。任何其他标签（包括 <code><table>）都会触发自动修复机制，导致 DOM 错乱。
<p>常见错误现象：<code>document.querySelector('table.nested') 返回 <code>null；子表显示在主表上方或下方；给 <code>tr > table 写的 CSS 完全不生效；打印时子表消失；屏幕阅读器跳过整块内容。
根本原因不是“浏览器不支持”，而是 HTML 规范明确禁止——<tr> 的合法子节点只有 <code><td>、<code><th>，以及语义化分组标签（如 <code><thead>）的内部结构，但这些分组标签本身也不能直接塞进 <code><tr> 里。
<h3><code><td> 里嵌 <code><table> 必须重置哪些样式
<p>子表默认继承父表样式，尤其当父表用了 <code>border-collapse: collapse（比如 Bootstrap 或多数 reset.css），子表边框会消失、重叠或加倍。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
border-collapse: separate（不能写 <code>inherit 或留空） - 避免用
width: 100%；改用 <code>max-width: 100% + <code>overflow-x: auto，尤其父表启用了 <code>table-layout: fixed 时 - 子表内
<th> 默认加粗居中，建议用类名隔离样式，例如 <code>.child-table th { text-align: left; font-weight: normal; } <li>为子表单独设 <code>font-size（如 <code>0.875em），防止字体继承放大导致列宽失控 - 用
colspan + 独立 <code><table> 实现跨列详情区：把子表放在合并后的 <code><td> 内，避免结构错位 <li>现代布局优先选 <code>CSS Grid 或 <code>Flex：对齐、响应、间距控制更可控，DOM 平坦，JS 操作简单
嵌套表格必须保持完整语义结构
漏掉 <thead>、<code><tbody> 或直接写 <code><table><td>，会导致浏览器自动补全位置不可控，JS 遍历困难，屏幕阅读器无法识别列含义。
<p>正确结构示例：</p>
<pre class="brush:php;toolbar:false;"><td>
<table class="nested">
<thead><tr><th>Name</th><th>Value</th></tr></thead>
<tbody><tr><td>A</td><td>1</td></tr></tbody>
</table>
</td></pre>
<p>关键点：</p>
<ul><li><code><table> 下必须有 <code><thead> 或 <code><tbody>（至少一个），不能裸写 <code><tr><li>所有 <code><tr> 必须包裹在 <code><thead>、<code><tbody> 或 <code><tfoot> 中
<li>子表的 <code><th> 应仅用于其自身表头，不要混用作数据单元格
<h3>比嵌套 <code><table> 更稳的替代方案
<p>90% 的所谓“嵌套需求”，其实本质是视觉分组或按需展开，硬套子表反而增加维护成本和可访问性风险。</p>
<p>推荐做法：</p>
<ul>
<li>用 <code><details>/<code><summary> 替代静态嵌套：语义清晰、键盘可聚焦、屏幕阅读器友好，且无需重置样式</summary>
真正需要嵌套 <table> 的场景极少——通常是导出兼容旧系统、或对接特定报表引擎。其余情况，先问一句：这个“嵌套”是不是只是“想让某行内容看起来像另一个表格”？如果是，那就不是嵌套问题，是展示逻辑问题。</table>
