嵌套表格必须写在或内，不能直接放在下；子表需设border-collapse: separate并单独定义边框；其语义独立，需手动添加aria-label等无障碍支持。
嵌套表格只能写在 <td> 或 <code><th> 里
<p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><td> 和 <code><th>。把 <code><table> 直接写在 <code><tr> 下，浏览器会把它“踢”出去——可能塞到父 <code><table> 外面，也可能丢进隐式 <code><tbody>。结果就是 DOM 错乱、<code>document.querySelector('table.nested') 返回 null、CSS 选择器 tr > table 完全不生效。
正确做法只有一条：把整个子 <table> 写进某个 <code><td> 或 <code><th> 的内容位置。如果需要视觉上跨多列，先用 <code>colspan 合并单元格，再往里放子表。
- 别写：
<tr><table><tr><td>...</td></tr></table></tr> - 要写：
<tr><td colspan="3"><table class="nested">...</table></td></tr> - 子表也必须带
<thead> 和 <code><tbody>，不能省略 <code><tr> —— 否则浏览器补的结构不可控，JS 遍历 <code>table.tBodies[0].rows会出错border-collapse: collapse会让子表格边框消失或加倍父表若用了
border-collapse: collapse（比如 Bootstrap 默认样式），子表会继承该值，导致边框被“吃掉”或粗细异常。这不是 bug，是 CSS 层叠行为。必须显式重置子表样式。关键 CSS 规则只有两条：
- 给子表加
border-collapse: separate（不是inherit） - 统一控制边框：子表
<td> 和 <code><th> 必须单独设 <code>border: 1px solid #ddd，不能只靠父表边框撑起来 - 避免用
width: 100%—— 若父表启用了table-layout: fixed，子表宽度可能被截断；改用max-width: 100%+overflow-x: auto
子表格不是语义“子表”，而是独立节点
HTML 没有“父子表格”语义。浏览器不会把嵌套的
<table> 当作主表的一部分处理。这意味着： <ul> <li>屏幕阅读器无法感知“这是订单明细表”，除非你手动加 <code>aria-label或<caption></caption> - 给子表加
-
table.rows.length只统计主表的<tr>，子表里的 <code><tr> 不计入 <li>JS 删除某行时，<code>rowIndex不包含子表行，容易误删 - 打印时子表可能被截断或换页错位，因为浏览器按块渲染，不识别嵌套逻辑
- 视觉可区分：子表必须有独立 class（如
class="nested-table"），字体大小、内边距、边框颜色都要重置，避免继承放大 - 结构可维护：子表内部禁用
colspan/rowspan，极易和父表对齐冲突；空表格至少写一行占位<tr><td>暂无数据</td></tr> - 行为可预测：不要依赖
cellspacing/cellpadding（已废弃），所有间距、边框、宽度全部用 CSS 控制
如果只是想实现“点击展开详情”，用 <details><summary></summary></details> 更可靠：语义清晰、键盘可操作、无障碍支持原生。
真正能用的嵌套必须满足三个条件
不是语法合法就行，得让子表在视觉、结构、行为上都可控。否则上线后就会发现对齐错乱、响应式失效、JS 操作失灵。
多数所谓“嵌套需求”，其实是“动态展开”。硬塞一个子 <table> 进去，调样式花半天，改 JS 调三遍，还影响打印和读屏体验——这些坑，往往在上线前才暴露。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
