多层嵌套表格不该做，因其破坏语义、可访问性与维护性；合法嵌套仅限于td/th内，替代方案包括details/summary、colspan+独立table或CSS Grid。
多层嵌套表格在现代 HTML 中不是“能不能做”，而是“该不该做”——绝大多数场景下，它会直接破坏语义、可访问性与维护性，且浏览器 DOM 自动修复机制会让结构失控。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
为什么 <tr> 里不能放 <code><table></H3>
<p>浏览器对 <code><tr> 的子元素有硬性限制：只接受 <code><td> 和 <code><th>。任何其他标签（包括 <code><table>）都会触发自动修复，常见后果包括：</p>
<ul>
<li><code>document.querySelector('.nested') 返回 <code>null，因为节点被移出原位置</li>
<li>子表格显示在主表上方或下方，而非目标单元格内</li>
<li>给 <code>tr > table 写的 CSS 完全不生效</li>
<li>打印时子表消失，屏幕阅读器跳过整块内容</li>
</ul>
<H3>真要嵌套，必须塞进 <code><td> 或 <code><th> 里</H3>
<p>这是唯一合法路径。子表格的整个 HTML（从 <code><table> 到 ）必须完整写在某个 <td> 或 <code><th> 的内容中。关键实操点：
<ul>
<li>先用 <code>colspan 或 <code>rowspan 合并出足够空间，再往里塞子表
width: 100% —— 父表若设了 <code>table-layout: fixed，子表会撑破或截断
border-collapse: separate，否则继承父表 <code>collapse 后边框消失或加倍
<th> 默认加粗居中，建议用类名隔离，例如 <code>.child-table th { text-align: left; font-weight: normal; }
<h3>二级以上嵌套极易崩，别试</h3>
<p>三级嵌套（<code><table> > <code><td> > <code><table> > <code><td> > <code><table>）语法上不报错，但实际中几乎必然出问题：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>列宽计算完全不可控，尤其跨浏览器时</li>
<li>开发者工具里看到的 DOM 和你写的 HTML 差距极大</li>
<li>打印、导出 Excel、屏幕阅读器解析全部失效</li>
<li>哪怕只是加个 <code>max-width 或 <code>overflow-x: auto，都可能触发渲染异常
比嵌套更稳的替代方案
95% 的所谓“多层嵌套需求”，本质是“点击展开详情”或“视觉分组”。推荐三个真正可用的替代路径：
- 用
<details><summary> + <code><table>：零 JS、语义清晰、键盘可聚焦、读屏软件能识别 <li>用 <code>colspan 拉通整行后放独立 <code><table>：适合“某行下方紧贴展示明细”的强绑定场景 <li>用 CSS Grid 替代：当嵌套只为对齐而非表格语义（如表单字段排布），Grid 更轻量、响应式可控、DOM 干净</li> <p>真正难的不是怎么写三层 <code><table>，而是判断这个需求到底需不需要表格语义——多数时候，答案是否定的。</table>
