内不能直接写，因浏览器只允许和作为其子元素，否则触发自动修复导致dom错乱、样式失效、js无法获取节点；正确做法是将子表完整置于或内，并重置样式、确保结构完整。
不能直接在 <tr> 里写 <code><table>，否则浏览器会自动移出、DOM 错乱、CSS 和 JS 全失效——唯一合法位置是 <code><td> 或 <code><th> 内部。<h3>为什么 <code><tr> 里放 <code><table> 一定会失败<p>浏览器对 <code><tr> 的子元素有硬性限制：只允许 <code><td> 和 <code><th>。一旦你写成 <code><tr><table>...</table></tr>，浏览器会触发自动修复机制，常见后果包括：
document.querySelector('table.nested') 返回 null（节点已被移出原位置）tr > table 写的 CSS 完全不生效正确嵌套写法：必须完整落在
<td> 或 <code><th> 里<p>子表格必须作为单元格的内容存在，且自身结构要完整（含 <code><thead>、<code><tbody>）。示例：<pre class="brush:php;toolbar:false;"></pre>
<table class="parent">
<tr>
<th>部门</th>
<th>人员详情</th>
</tr>
<tr>
<td>技术部</td>
<td>
<!-- ✅ 正确：整个子表在 td 内 -->
<table class="child-table">
<thead><tr>
<th scope="col">姓名</th>
<th scope="col">职级</th>
</tr></thead>
<tbody><tr>
<td>张三</td>
<td>P6</td>
</tr></tbody>
</table>
</td>
</tr>
</table>
<ul>
<li>若需跨列展示（如“详情”占两列），先用 <code>colspan="2" 合并单元格，再往里塞子表
<thead> 和 <code><tbody>，否则浏览器补全不可控，JS 遍历和无障碍支持都会出问题<li><code><th scope="col"> 必须写，否则屏幕阅读器无法识别列含义<h3>子表格样式必须重置，否则边框/宽度全乱</h3>
<p>父表常用 <code>border-collapse: collapse（Bootstrap、reset.css 默认启用），子表继承后会导致边框消失或加倍；父表设了 table-layout: fixed 时，子表 width: 100% 还可能被截断。必须手动覆盖：
- 子表加
border-collapse: separate（不能写inherit或留空） - 避免
width: 100%，改用max-width: 100%+overflow-x: auto - 子表内
<th> 默认加粗居中，易与父表冲突，建议统一加类名隔离：<code>.child-table th { text-align: left; font-weight: normal; } - 可设
font-size: 0.875em防止字体继承放大
多数嵌套需求其实该用 <details></details> 替代
硬塞静态子表进去，90% 的问题都来自结构不合法或样式难隔离。而点击展开这类场景，<details></details> 是零 JS、语义清晰、无障碍友好的解法：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<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>
-
<summary></summary>可被读屏软件识别，支持键盘聚焦与空格切换 - 打印时默认只打展开态，可控性远高于静态嵌套
- 样式更轻量，无需重置
border-collapse等一堆兼容逻辑
真正需要静态嵌套的场景极少——比如导出 PDF 时必须保持全部展开，或数据维度固定且需横向对比。其他时候，<details></details> 几乎总是更稳的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
