嵌套表格必须放在<td>或<th>内，不可直接置于<tr>中，否则浏览器会自动修正DOM结构导致节点丢失、样式失效、打印错位及无障碍支持失败；正确做法是将完整子表（含<thead><tbody>）作为单元格内容，并重置子表样式。
嵌套表格只能放在 <td> 或 <th> 里，写在 <tr> 下会被浏览器自动移出，DOM 结构就乱了——你查不到节点、样式不生效、打印错位，全是因为这一个位置错误。
为什么 <tr> 里不能直接放 <table>
浏览器对 <tr> 的子元素有硬性限制：只允许 <td> 和 <th>。一旦你写成这样：
<tr> <table class="nested"><tr><td>数据</td></tr></table> </tr>
它就会被“修复”——大概率塞进隐式 <tbody> 或直接扔到主表外面。结果就是：
-
document.querySelector('table.nested')返回null - 子表格显示在主表上方或下方，而不是目标单元格内
- 给
tr > table写的 CSS 完全不生效 - 屏幕阅读器跳过整块内容，无障碍支持失效
正确写法：完整子表必须嵌入 <td> 或 <th>
把整个子 <table>（包括 <thead>、<tbody>）作为单元格的内容写进去，不要省略任何语义标签：
立即学习“前端免费学习笔记（深入）”；
<tr>
<td>
<table class="child-table">
<thead>
<tr><th>日期</th><th>金额</th></tr>
</thead>
<tbody>
<tr><td>2026-10-05</td><td>¥8,200</td></tr>
</tbody>
</table>
</td>
<td>其他列内容</td>
</tr>
- 子表必须有
<thead>和<tbody>，否则 JS 遍历table.tBodies[0].rows可能出错 - 如果子表要横跨多列，先用
colspan="3"合并父单元格，再往里放 - 给子表加独立类名（如
class="child-table"），避免样式污染主表
子表样式必须重置，不能靠继承
父表若用了 border-collapse: collapse（Bootstrap 默认、多数 reset.css 启用），子表边框会消失或变双线——这不是 bug，是 CSS 层叠行为。必须显式覆盖：
- 子表加
border-collapse: separate（不能写inherit或留空） - 避免
width: 100%，改用max-width: 100%+overflow-x: auto，尤其父表启用了table-layout: fixed时 - 子表内
<th>默认加粗居中，建议用.child-table th { text-align: left; font-weight: normal; }隔离 - 子表字体建议设为
font-size: 0.875em，防止继承放大导致列宽失控
真要嵌套？先想想有没有更稳的替代方案
90% 的所谓“嵌套需求”，其实是“点击展开详情”。硬塞子表，维护难、无障碍差、响应式崩。更可控的做法：
- 用
<details><summary>包裹子表：零 JS、语义清晰、键盘可聚焦、读屏软件可识别 - 用
colspan拉通整行后放独立<table>：适合“某行下方紧贴展示子数据”的强绑定场景 - 用 CSS Grid 替代：当只是视觉对齐而非真正需要表格语义（比如导出、排序），
display: grid更轻量、断点更可控
嵌套超过两层（table > td > table > td > table）几乎必然出问题：JS 节点顺序不可靠、小屏横向滚动不可避免、打印时层级错位——这时候不是代码没写对，而是结构本身就不该这么设计。
