嵌套表格必须写在<td>或<th>内，不能直接放入<tr>；否则浏览器会自动修正DOM导致错乱。正确做法是将子表格完整置于<td>或<th>中，并重置border-collapse、width等样式，优先用vertical-align控制对齐，复杂层级才用嵌套，简单展开推荐<details>。
嵌套表格必须写在 <td> 或 <th> 里
浏览器对 <tr> 的子元素有硬性限制：它只接受 <td> 和 <th>。把 <table> 直接塞进 <tr>，浏览器会自动把它“踢”出去——可能丢到父 <table> 外面，也可能塞进隐式生成的 <tbody>，结果就是 DOM 错乱、CSS 生效不了、JS 查不到节点。
常见错误现象包括：
- 子表格显示在主表上方或下方，而不是目标单元格内
-
document.querySelector('table.nested')返回null - 给
tr > table写的 CSS 完全不生效
正确做法只有一个：把整个子 <table> 完整写进某个 <td> 或 <th> 的内容区域。必要时先用 colspan 或 rowspan 合并出足够空间，再往里塞。
子表格边框和宽度经常错乱？重置 border-collapse 和 width
父表若用了 border-collapse: collapse（比如 Bootstrap 默认样式），子表会继承它，导致边框被“吃掉”——要么全无，要么粗细加倍。这不是 bug，是 CSS 层叠行为。
立即学习“前端免费学习笔记（深入）”；
必须显式重置子表样式：
- 给子表加
border-collapse: separate（不是inherit） - 避免用
width: 100%，改用max-width: 100%+overflow-x: auto，尤其当父表启用了table-layout: fixed时 - 子表内的
<th>默认加粗居中，容易和父表冲突，建议统一加类名隔离，比如.child-table th
嵌套表格内容垂直对齐总偏移？优先用 vertical-align 而非 valign
valign 是 HTML4 的废弃属性，现代浏览器虽仍支持，但行为不稳定，尤其在嵌套结构中容易被父级样式覆盖或忽略。
真正可控的做法是给外层 <td> 设置 vertical-align：
-
<td style="vertical-align: top"><table>...</table></td>—— 让子表顶部贴齐单元格上沿 -
<td style="vertical-align: middle">—— 居中对齐（注意：这是单元格内容的垂直对齐，不是子表内部的行） - 不要依赖子表自身
<tr>或<td>的vertical-align来控制它在父单元格里的位置，那是第二层对齐
需要展开式详情？别硬嵌套，用 <details> 更稳妥
多数所谓“嵌套需求”，其实是“点击展开详情”。硬塞一个子表进去，既难调样式，又难维护，还影响打印和屏幕阅读器体验。
<details> 是零 JS 解决方案，语义清晰、无障碍友好：
- 它天然保持 DOM 结构扁平，不会触发浏览器自动修正
- 不需要操心子表继承父表样式、宽度溢出、打印截断等问题
- 配合
<summary>可以明确表达可交互状态，比纯视觉嵌套更符合可访问性要求
真正复杂的数据层级才值得用嵌套表格；日常的“点开看明细”场景，<details> 几乎总是更轻、更稳、更易测。
