子表格必须嵌入<td>或<th>内，不可直接置于<tr>下；否则会被浏览器移出导致DOM错乱；正确做法是将其完整写入单元格内容区，必要时用colspan合并空间。
子表格必须写在 <td> 或 <code><th> 里，不能直接塞进 <code><tr><p>浏览器对 <code><tr> 的子元素有硬性限制：只允许 <code><td> 和 <code><th>。如果你把 <code><table> 直接写在 <code><tr> 下，它会被自动移出——可能飘到主表外面，也可能被塞进隐式 <code><tbody>，结果就是 DOM 错乱、JS 查不到、CSS 选不到。
<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>可被读屏软件识别，支持键盘聚焦与空格切换 - 不需要 JS 就能切换显示状态
- CSS 控制干净：只给
.child-table写样式，不碰父表任何规则
示例结构：
<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>真要嵌套时，优先用
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明确表达了“该行属于上一行的扩展”，语义更清晰；JS 操作时也更容易定位和控制显隐状态。真正容易被忽略的是：子表的
<thead> 和 <code><tbody> 不是可选——它们影响 JS 遍历（<code>table.tBodies[0].rows）、屏幕阅读器理解列含义，以及浏览器自动补全时的 DOM 位置。 -
