嵌套表格必须置于td或th内，因浏览器仅允许tr的子元素为td、th；直接写在tr下会导致dom错乱；正确做法是将子表完整放入td/th，必要时用colspan合并单元格；子表需重置border-collapse: separate并避免width: 100%；推荐用details/summary替代静态嵌套以提升可访问性与维护性。
嵌套表格只能放在 <td> 或 <code><th> 里
<p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><td> 和 <code><th>。如果你把 <code><table> 直接写在 <code><tr> 下，浏览器会自动把它“踢”出去——可能塞到父 <code><table> 外面，也可能丢进隐式 <code><tbody>，结果就是 DOM 结构错乱、CSS 选不到、JS 查不到节点。
<p>常见错误现象：</p>
<ul>
<li>子表格显示在主表上方或下方，而不是目标单元格内</li>
<li>
<code>document.querySelector('table.nested') 返回 null
tr > table 写的 CSS 完全不生效正确做法只有一个：把整个子 <table> 完整写进某个 <code><td> 或 <code><th> 的内容区域。必要时先用 <code>colspan 合并出足够空间，再往里塞。
子表边框消失？必须重置 border-collapse
父表若用了 border-collapse: collapse（常见于 Bootstrap 或自定义样式），子表默认继承后，边框会被“吃掉”——要么全无，要么粗细加倍。这不是 bug，是 CSS 层叠行为。
必须显式重置子表样式：
- 给子表加
border-collapse: separate（不是inherit） - 避免用
width: 100%，改用max-width: 100%+overflow-x: auto，尤其当父表启用了table-layout: fixed时 - 子表内的
<th> 默认加粗居中，容易和父表冲突，建议统一加类名隔离，比如 <code>.child-table th用
<details></details>替代静态嵌套更可控多数所谓“嵌套需求”，其实是“点击展开详情”。硬塞一个子表进去，既难调样式，又难维护，还影响打印和屏幕阅读器体验。
<details></details>是零 JS 解决方案，语义清晰、无障碍友好：<summary></summary>可被读屏软件识别，支持键盘聚焦与空格切换。示例结构：
<td> <details><summary>点击查看明细</summary><table class="child-table"> <tr> <th>日期</th> <th>金额</th> </tr> <tr> <td>2026-05-20</td> <td>¥12,800</td> </tr> </table></details> </td>
这个方案不需要 JS 就能切换显示状态，CSS 控制也干净：只给
.child-table写样式，不碰父表任何规则。真正要嵌套时，优先考虑
colspan+ 独立<table><p>如果子数据必须和某一行强绑定（比如“技术部”行下方紧贴展示人员列表），与其把子表塞进一个 <code><td> 导致列宽被撑开、对齐失衡，不如用 <code>colspan拉通整行，再放独立子表：<tr> <td>技术部</td> <td>23人</td> </tr><tr> <td colspan="2"> <table class="child-table"> <tr> <th>姓名</th> <th>职级</th> </tr> <tr> <td>张三</td> <td>P6</td> </tr> </table> </td> </tr>注意：
colspan="2"必须和上一行的总列数一致；子表仍需保持完整语义结构（含<thead> 和 <code><tbody>），否则 JS 遍历 <code>table.tBodies[0].rows会出错，屏幕阅读器也无法理解列含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
