html表格嵌套必须将子表置于或内，不可直接放在中，否则浏览器会自动修复dom结构；正确做法是用colspan/rowspan合并单元格后嵌入，并重置子表样式如border-collapse和width，优先考虑替代方案。

HTML 表格标签的嵌套不是“能不能嵌”，而是“在哪嵌、怎么嵌才不被浏览器修正”。只要违反 DOM 结构规则，<tr> 里直接放 <code><table>，浏览器就会把它踢出表格上下文——你写的结构和最终渲染的 DOM 完全两回事。 <h3>为什么 <code><tr> 里不能直接写 <code><table><p>浏览器对 <code><tr> 的子元素有硬性限制：它只接受 <code><th> 或 <code><td>。任何其他标签（包括 <code><table>、<code><div>、<code><form></form>）都会触发自动修复机制。

• 常见错误现象：<table class="nested"> 显示在主表上方或下方，而不是目标单元格内 <li> <code>document.querySelector('table.nested') 返回 null，因为节点已被移出原位置
• 给 tr > table 写的 CSS 根本不生效——选择器根本没匹配到东西
• 打印时子表消失，屏幕阅读器跳过整块内容

子表格必须完整写在 <td> 或 <code><th> 内部 <p>合法入口只有一个：把整个子 <code><table> 当作单元格的内容写进去。必要时先用 <code>colspan 或 rowspan 合并空间，再塞进去。

• 正确示例：<td><table><tr><td>子数据</td></tr></table></td>
• 若要占满整行，用 <td colspan="4">...</td>，别试图在 <tr> 下平行放多个 <code><td> 和一个 <code><table><li>避免在 <code><td> 里混写文本 + 子表，容易错位；用 <code><div> 包一层再放子表，更可控 <h3>子表样式必须显式重置，不能依赖继承</h3> <p>父表若用了 <code>border-collapse: collapse（Bootstrap 默认、很多 reset.css 也设），子表会继承后边框消失或加倍——这不是 bug，是层叠行为。
  

  Pptx To Html

  使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

  下载
  • 必须给子表加 style="border-collapse: separate;"，不是 inherit，也不是不写
  • 别用 width: 100%，改用 max-width: 100%; overflow-x: auto;，尤其当父表启用了 table-layout: fixed
  • 子表内的 <th> 默认加粗居中，建议加类名隔离，比如 <code><table class="child-table">，然后写 <code>.child-table th { text-align: left; font-weight: normal; }

    多数“嵌套需求”其实该用 <details></details> 替代

    点击展开详情、折叠子数据这类场景，硬塞一个子表进去，样式难调、JS 难查、打印异常、无障碍支持差。

    • <details><summary>展开详情</summary><table>...</table></details> 是零 JS 解决方案
    • 语义清晰，屏幕阅读器能播报“可展开”状态
    • 默认收起，节省首屏空间；展开后 DOM 仍在原位置，CSS 和 JS 都能正常作用

    真正难的不是写几层 <table>，而是判断这个结构是否真需要嵌套表格——很多时候，<code><details></details> + <table> 或者用 <code>flex/grid 模拟表格视觉效果，反而更稳、更易维护。