嵌套表格必须写在td或th内，否则浏览器会自动移出导致dom错乱；正确做法是将子表完整放入td/th，必要时用colspan/rowspan合并单元格；需重置border-collapse为separate并避免width:100%。
嵌套表格只能写在 <td> 或 <code><th> 里
<p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><td> 和 <code><th>。把 <code><table> 直接写在 <code><tr> 下，浏览器会自动把它“踢”出去——可能塞到父 <code><table> 外面，也可能丢进隐式 <code><tbody>。结果就是 DOM 结构错乱、<code>document.querySelector('table.nested') 返回 null、给 tr > table 写的 CSS 完全不生效。
正确做法只有一个：把整个子 <table> 完整写进某个 <code><td> 或 <code><th> 的内容区域。必要时先用 <code>colspan 或 rowspan 合并出足够空间，再往里塞。
- 错误写法：
<tr><table>...</table></tr> - 正确写法：
<tr><td><table>...</table></td></tr> - 若需横跨多列展示子表，优先用
colspan="2"（数值按实际列数填）拉通后再放子表
子表边框消失？必须重置 border-collapse
父表若用了 border-collapse: collapse（常见于 Bootstrap 或自定义 reset），子表默认继承后，边框会被“吃掉”——要么全无，要么粗细加倍。这不是 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>
- CSS 只需控制
.child-table，不污染父表规则 - 不需要 JS 就能切换显示状态
- 打印时默认折叠，节省纸张；屏幕阅读器能准确播报“点击查看明细”
真要强绑定某一行？用
colspan+ 独立<table><p>如果子数据必须紧贴某一行下方（比如“技术部”行下面紧跟人员列表），强行塞进单个 <code><td> 会导致列宽被撑开、文字对齐错乱、响应式失效。 <p>更稳的做法是：用 <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>- 视觉上对齐更可控，不会破坏原列宽逻辑
- JS 操作时，子表行不参与父表
rowIndex计算，避免误删 - 仍需重置子表的
border-collapse和宽度策略，否则照样出问题
真正麻烦的从来不是语法能不能写，而是嵌套后样式是否可预测、JS 是否能稳定操作、屏幕阅读器是否能理解结构。哪怕只是加一层
<details></details>或多写一行colspan，都比硬塞进<td> 里更接近“能用”的标准。</td> - CSS 只需控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
