子表格必须嵌入或内，否则浏览器会移除导致dom错乱；需重置border-collapse为separate，避免继承父表样式；推荐用实现展开功能，语义清晰且无障碍友好。
子表格必须写在 <td> 或 <code><th> 里，不能直接塞进 <code><tr><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 或 rowspan 合并出足够空间，再往里塞。
子表边框消失？必须重置 border-collapse 为 separate
父表若用了 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真要强绑定行数据？优先用
colspan+ 独立<table><p>如果子数据必须紧贴某一行下方（比如“技术部”行下面紧跟人员列表），强行塞进单个 <code><td> 会导致列宽被撑开、文字对齐错乱、响应式失效。 <p>更稳的做法是：</p> <ul> <li>用 <code>colspan拉通整行，再放独立子表 - 给子表加
margin-top: 4px、font-size: 0.9em等微调样式，视觉上形成层级感 - 配合 JS 控制该行的
display状态，实现展开/收起
示例结构：
<tr>
<td>技术部</td>
<td>23人</td>
</tr><tr class="detail-row">
<td colspan="2">
<table class="child-table">
<tr>
<th>姓名</th>
<th>职级</th>
</tr>
<tr>
<td>张三</td>
<td>P6</td>
</tr>
</table>
</td>
</tr>
多数“嵌套需求”本质是“点击展开”，用 <details></details> 更轻量且语义正确
硬塞一个子表进去，既难调样式，又难维护，还影响打印和屏幕阅读器体验。<details></details> 是零 JS 解决方案，语义清晰、无障碍友好：<summary></summary> 可被读屏软件识别，支持键盘聚焦与空格切换。
关键点：
- 不需要 JS 就能切换显示状态
- CSS 控制干净：只给
.child-table写样式，不碰父表任何规则 - 子表结构仍保持在
<td> 内，不破坏表格语义 <p>示例写法：</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>真正麻烦的从来不是怎么写两层 <code><table>，而是怎么让第二层在不同设备、不同缩放、不同辅助工具下都保持可读、可操作、可维护。样式重置和语义选择，比嵌套本身更值得花时间。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
