多层嵌套表格不该做，因其破坏语义、可访问性与维护性；合法嵌套仅限于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。
为什么
浏览器对 的子元素有硬性限制：只接受 和 。任何其他标签（包括 ）都会触发自动修复，常见后果包括：
document.querySelector('.nested') 返回 null，因为节点被移出原位置
子表格显示在主表上方或下方，而非目标单元格内
给 tr > table 写的 CSS 完全不生效
打印时子表消失，屏幕阅读器跳过整块内容
真要嵌套，必须塞进 或 里
这是唯一合法路径。子表格的整个 HTML（从 到 ）必须完整写在某个 或 的内容中。关键实操点：
先用 colspan 或 rowspan 合并出足够空间，再往里塞子表
避免 width: 100% —— 父表若设了 table-layout: fixed，子表会撑破或截断
子表必须显式加 border-collapse: separate，否则继承父表 collapse 后边框消失或加倍
子表内 默认加粗居中，建议用类名隔离，例如 .child-table th { text-align: left; font-weight: normal; }
二级以上嵌套极易崩，别试
三级嵌套（ > > > > ）语法上不报错，但实际中几乎必然出问题：
列宽计算完全不可控，尤其跨浏览器时
开发者工具里看到的 DOM 和你写的 HTML 差距极大
打印、导出 Excel、屏幕阅读器解析全部失效
哪怕只是加个 max-width 或 overflow-x: auto，都可能触发渲染异常
比嵌套更稳的替代方案
95% 的所谓“多层嵌套需求”，本质是“点击展开详情”或“视觉分组”。推荐三个真正可用的替代路径：
用 + ：零 JS、语义清晰、键盘可聚焦、读屏软件能识别
用 colspan 拉通整行后放独立 ：适合“某行下方紧贴展示明细”的强绑定场景
用 CSS Grid 替代：当嵌套只为对齐而非表格语义（如表单字段排布），Grid 更轻量、响应式可控、DOM 干净
真正难的不是怎么写三层 ，而是判断这个需求到底需不需要表格语义——多数时候，答案是否定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
