嵌套表格必须置于或内，不可直接放在下；需保持完整语义结构（含），显式设置border-collapse: separate，宽度用max-width替代width，并优先考虑替代静态嵌套。
table 嵌套本身不是排版工具，而是语义化数据容器；强行用它做精细排版，90% 的问题都来自结构不合法或样式未隔离。
嵌套表格只能写在 <td> 或 <code><th> 里
<p>浏览器对 <code><tr> 的子元素有硬性限制：只接受 <code><td> 和 <code><th>。把 <code><table> 直接写在 <code><tr> 下，浏览器会自动把它移出当前行——可能塞到父 <code><table> 外面，也可能丢进隐式 <code><tbody>，结果就是 DOM 错乱、JS 查不到节点、CSS 完全不生效。
<ul>
<li>常见错误现象：<code>document.querySelector('table.nested') 返回 null；子表显示在主表上方或下方；给 tr > table 写的 CSS 毫无反应
<td> 或 <code><th> 的内容区域，例如：<code><td><table class="nested">...</table></td>
colspan 合并单元格，再往里放子表，避免列宽被单个 <td> 撑爆
<h3>子表格必须保持完整语义结构</h3>
<p>漏掉 <code><thead>、<code><tbody> 或直接写 <code><table><td>...，会导致浏览器自动补全位置不可控，JS 遍历困难，屏幕阅读器无法识别列含义。
<ul><li><code><thead> 必须包裹至少一个 <code><tr>，否则会被忽略或合并进 <code><tbody><li><code><tbody> 不是可选——它是 JS 安全遍历数据行的基础（<code>table.tBodies[0].rows）
<th scope="col"> 要明确标注列作用，否则无障碍体验断裂
<h3>边框和宽度失控？必须重置 <code>border-collapse 和宽度策略
父表用了 border-collapse: collapse（Bootstrap 默认、自定义样式常见），子表默认继承后边框会消失或加倍；父表启用 table-layout: fixed 时，子表设 width: 100% 很可能被截断。
- 子表必须显式声明
border-collapse: separate，不能用inherit - 避免
width: 100%，改用max-width: 100%+overflow-x: auto，尤其在窄屏或固定布局下 - 子表内
<th> 的加粗/居中默认样式易与父表冲突，建议统一加类名隔离，如 <code>.child-table th多数“嵌套需求”其实该用
<details></details>替代硬塞静态子表进去，既难调样式，又难维护，还影响打印和屏幕阅读器。点击展开详情这类场景，
<details></details>是零 JS、语义清晰、无障碍友好的解法。-
<summary></summary>可被读屏软件识别，支持键盘聚焦与空格切换 - 结构干净：
<td><details><summary>...</summary><table class="child-table">...</table></details></td>
- CSS 只需作用于
.child-table，完全不干扰父表规则
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
