嵌套表格必须写在或内，不可直接置于下；需重置border-collapse为separate，避免继承父表样式；推荐用实现展开式详情，或用colspan整行放置子表以保持结构清晰。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
嵌套只能写在 <td> 或 <code><th> 里
<p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><td> 和 <code><th>。如果你把 <code><table> 直接写在 <code><tr> 下，浏览器会自动把它“踢”出去——可能塞到父 <code><table> 外面，也可能丢进隐式 <code><tbody>，结果就是 DOM 结构错乱、CSS 选不到、JS 查不到节点。
<p>常见错误现象：</p>
<ul>
<li>子表格显示在主表上方或下方，而不是目标单元格内</li>
<li>
<code>document.querySelector('table.nested') 返回 null
tr > table 写的 CSS 完全不生效正确做法只有一个：把整个子 <table> 完整写进某个 <code><td> 或 <code><th> 的内容区域。必要时先用 <code>colspan 或 rowspan 合并出足够空间，再往里塞。
子表边框消失？必须重置 border-collapse
父表若用了 border-collapse: collapse（常见于 Bootstrap 或自定义样式），子表默认继承后，边框会被“吃掉”——要么全无，要么粗细加倍。这不是 bug，是 CSS 层叠行为。
立即学习“前端免费学习笔记（深入）”；
必须显式重置子表样式：
- 给子表加
border-collapse: separate（不是inherit） - 避免用
width: 100%，改用max-width: 100%+overflow-x: auto，尤其当父表启用了table-layout: fixed时 - 子表内的
<th> 默认加粗居中，容易和父表冲突，建议统一加类名隔离，比如 <code>.child-table th用
<details></details>替代静态嵌套更可控多数所谓“嵌套需求”，其实是“点击展开详情”。硬塞一个子表进去，既难调样式，又难维护，还影响打印和屏幕阅读器体验。
<details></details>是零 JS 解决方案，语义清晰、无障碍友好：-
<summary></summary>可被读屏软件识别，支持键盘聚焦与空格切换 - 子表样式完全独立，不受父表任何规则污染
- 不需要额外 JS 就能控制显隐，CSS 控制也干净
示例结构：
<td> <details> <summary>点击查看明细</summary> <table class="child-table"> <tr><th>日期</th><th>金额</th></tr> <tr><td>2026-05-20</td><td>¥12,800</td></tr> </table> </details> </td>真要强绑定行数据？优先用
colspan+ 独立<table><p>如果子数据必须紧贴某一行下方（比如部门行下面紧跟人员列表），强行塞进单个 <code><td> 会导致列宽被撑开、文字对齐错乱、响应式失效。 <p>更稳的做法是：用 <code>colspan拉通整行，再放独立子表：<tr> <td>技术部</td> <td>23人</td> </tr> <tr> <td colspan="2"> <table class="child-table"> <tr><th>姓名</th><th>职级</th></tr> <tr><td>张三</td><td>P6</td></tr> </table> </td> </tr>这种写法视觉上仍是“嵌套感”，但 DOM 结构干净、列宽可控、打印和导出 PDF 更可靠。
真正麻烦的从来不是怎么写嵌套，而是没想清楚：这个结构到底需不需要嵌套？是不是只是展开逻辑被误当成布局问题？
-
