嵌套表格必须置于<td>或<th>内，不可直接放在<tr>中；需保持完整语义结构（含<thead><tbody>）；CSS须统一设置border-collapse: collapse并约束宽度以避免布局错乱。
嵌套表格只能放在 <td> 或 <th> 里
浏览器对 <table> 的 DOM 结构有硬性校验：<tr> 只允许直接子元素是 <th> 或 <td>，其他任何标签（包括另一个 <table>）都会被自动“修复”——通常被移出当前 <tr>，甚至塞进隐式生成的 <tbody> 中。结果就是：子表格不显示在单元格内，而是飘到主表上方或下方；JS 查不到节点；CSS 选不到目标；打印时布局错乱。
正确做法只有一条：把整个子表格写进某个 <td> 或 <th> 的内容位置。例如：
<tr>
<td>
<table class="nested">
<tr><td>子数据1</td></tr>
<tr><td>子数据2</td></tr>
</table>
</td>
<td>主表其他列</td>
</tr>
- 别在
<tr>里直接写<table>—— 浏览器会丢弃或重排结构 - 如果需要视觉上跨多列嵌套，先用
colspan合并单元格，再往里面放子表格 - 给子表格加独立类名（如
class="nested"），避免样式污染主表
<thead> 和 <tbody> 必须包裹 <tr>，不能省略
很多人以为嵌套表格可以简化结构，比如在子表里漏掉 <thead> 或直接写 <table><td>...。但这样会导致两个问题：一是浏览器自动补全的 <tbody> 位置不可控，二是语义缺失影响可访问性与 JS 操作。
子表格也应保持完整语义结构：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<td>
<table class="nested">
<thead>
<tr><th>日期</th><th>金额</th></tr>
</thead>
<tbody>
<tr><td>2026-06-01</td><td>¥12,500</td></tr>
</tbody>
</table>
</td>
-
<thead>必须包含至少一个<tr>，否则会被忽略或合并进<tbody> - 子表的
<tbody>不是可选——它让 JS 遍历数据行更安全（table.tBodies[0].rows） - 屏幕阅读器依赖
<thead>和<th scope="col">理解列含义，嵌套表也不能跳过
边框和间距必须用 border-collapse: collapse 统一控制
嵌套表格最容易踩的坑是边框发虚、双线、错位。原因很简单：主表和子表各自有默认的 border-spacing 和独立单元格边框，叠加后形成“边框套边框”。只给 <table> 加 style="border: 1px solid #000;" 是无效的。
关键 CSS 规则只有两条：
table { border-collapse: collapse; }
td, th { border: 1px solid #ccc; padding: 8px; }
- 必须对主表和所有子表都应用
border-collapse: collapse，否则嵌套层级越多，边框越混乱 - 子表的
padding建议设得比主表略小（如6px），避免内容拥挤 - 旧版 Outlook 等邮件客户端不支持
border-collapse，如需兼容，可用 HTMLborder="1"作降级兜底（虽已废弃，但仍有实效）
响应式嵌套表格的可见性陷阱
当主表加了 overflow-x: auto 实现横向滚动，子表格若没做适配，会在小屏下被截断或撑破容器。这不是子表本身的问题，而是父级 <td> 缺少宽度约束导致的连锁反应。
- 给承载子表的
<td>设min-width（如min-width: 300px），防止被压缩到无法显示 - 子表内部禁用固定像素宽（如
width: 600px），改用max-width: 100%+table-layout: fixed - 慎用
position: sticky在嵌套表头——它只对直接父容器生效，嵌套层级中极易失效
嵌套本身不难，难的是每一层都得守住语义边界、样式隔离和 DOM 层级约束。稍一松懈，就从“结构清晰”变成“结构错乱”。
