子表格必须嵌套在 <td> 或 <th> 内且需完整书写 <table><thead><tbody><tr><td> 结构，否则浏览器自动修复导致 DOM 错乱；须设 border-collapse: separate、避免 width: 100%，优先考虑 <details> 替代硬嵌套。
不能在 <tr> 里直接写 <code><table>，否则浏览器会把它踢出当前行——你写的结构和实际 DOM 完全对不上，JS 查不到、CSS 选不到、打印错位、屏幕阅读器跳过。
<h3>子表格只能放在 <code><td> 或 <code><th> 里面
<p>这是唯一合法入口。浏览器强制校验 <code><tr> 的子元素只能是 <code><td> 或 <code><th>，其他标签（包括 <code><table>）都会触发自动修复，常见结果是子表被移到主表外、塞进隐式 <code><tbody>、甚至变成孤立节点。
<ul>
<li>错误写法：<code><tr><table>...</table></tr> → 子表消失或飘走
<tr><td><table>...</table></td></tr>
colspan="3" 合并单元格，再把子表整个塞进去<td> 里混写文本和子表，容易错位；建议用 <code><div> 包一层再放 <code><table>
<h3>
<code>border-collapse 必须重置，否则边框发虚或加倍
父表若用了 border-collapse: collapse（Bootstrap、reset.css 常见），子表默认继承后会出现边框“被吃掉”或粗细翻倍——这不是 bug，是 CSS 层叠行为。
- 子表必须显式设
border-collapse: separate，不能写inherit或不写 - 避免
width: 100%，尤其父表用了table-layout: fixed时；改用max-width: 100%+overflow-x: auto - 子表的
<th> 默认加粗居中，建议加类名隔离，比如 <code>.child-table th { text-align: left; font-weight: normal; }多数“嵌套需求”其实该用
<details></details>替代点击展开详情、折叠子数据这类场景，硬塞子表进去样式难调、JS 难查、打印异常、无障碍支持差。
立即学习“前端免费学习笔记（深入）”；
-
<details><summary>展开明细</summary><table>...</table></details>是零 JS 方案 - 语义清晰，屏幕阅读器能识别“可展开”，支持键盘聚焦与空格切换
- DOM 始终在原位置，CSS 和 JS 都能正常作用，不会被浏览器“修复”移走
- 真正难的不是怎么嵌套，而是判断这个结构是否真需要嵌套——很多时候用
<details></details>或 CSS Grid 更稳
最常被忽略的点：子表也必须写全
<thead>、<code><tbody>、<code><tr>，哪怕只有一行数据；漏掉 <code><tr> 或让 <code><thead> 为空，浏览器补的 DOM 位置不可控，JS 遍历和可访问性都会出问题。</thead> -
