<tr>内不能直接写<table>，因浏览器只允许<td>和<th>作为其子元素，否则触发自动修复导致DOM错乱、样式失效、JS无法获取节点；正确做法是将子表完整置于<td>或<th>内，并重置样式、确保结构完整。
不能直接在 <tr> 里写 <table>，否则浏览器会自动移出、DOM 错乱、CSS 和 JS 全失效——唯一合法位置是 <td> 或 <th> 内部。
为什么 <tr> 里放 <table> 一定会失败
浏览器对 <tr> 的子元素有硬性限制：只允许 <td> 和 <th>。一旦你写成 <tr><table>...</table></tr>，浏览器会触发自动修复机制，常见后果包括：
-
document.querySelector('table.nested')返回null（节点已被移出原位置） - 子表格显示在父表上方或下方，而非目标单元格内
- 给
tr > table写的 CSS 完全不生效 - 打印时子表消失，屏幕阅读器跳过整块内容
正确嵌套写法：必须完整落在 <td> 或 <th> 里
子表格必须作为单元格的内容存在，且自身结构要完整（含 <thead>、<tbody>）。示例：
<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>- 若需跨列展示（如“详情”占两列），先用
colspan="2"合并单元格，再往里塞子表 - 子表必须显式包含
<thead>和<tbody>，否则浏览器补全不可控，JS 遍历和无障碍支持都会出问题 -
<th scope="col">必须写，否则屏幕阅读器无法识别列含义
子表格样式必须重置，否则边框/宽度全乱
父表常用 border-collapse: collapse（Bootstrap、reset.css 默认启用），子表继承后会导致边框消失或加倍；父表设了 table-layout: fixed 时，子表 width: 100% 还可能被截断。必须手动覆盖：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 子表加
border-collapse: separate（不能写inherit或留空） - 避免
width: 100%，改用max-width: 100%+overflow-x: auto - 子表内
<th>默认加粗居中，易与父表冲突，建议统一加类名隔离：.child-table th { text-align: left; font-weight: normal; } - 可设
font-size: 0.875em防止字体继承放大
多数嵌套需求其实该用 <details> 替代
硬塞静态子表进去，90% 的问题都来自结构不合法或样式难隔离。而点击展开这类场景，<details> 是零 JS、语义清晰、无障碍友好的解法：
<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>可被读屏软件识别，支持键盘聚焦与空格切换 - 打印时默认只打展开态，可控性远高于静态嵌套
- 样式更轻量，无需重置
border-collapse等一堆兼容逻辑
真正需要静态嵌套的场景极少——比如导出 PDF 时必须保持全部展开，或数据维度固定且需横向对比。其他时候，<details> 几乎总是更稳的选择。
