合法但需谨慎：HTML5允许<td>内嵌<table>，但易引发边框消失、宽度失控等问题；应重置子表CSS或改用<details>+colspan方案。
直接在 <td> 里放 <table> 是合法的，但不是万能解法
HTML5 允许在 <td> 中嵌套任意流内容，包括完整的 <table>。语法上不会报错，浏览器也能渲染出来。但问题往往出现在视觉和行为层面：子表边框被父表 border-collapse: collapse 吃掉、文字对齐错乱、响应式下宽度失控、打印时布局崩塌——这些都不是“写错了”，而是语义与样式没对齐。
必须重置子表的 CSS，否则它会继承父表的破坏性样式
子表不是独立组件，它默认会受父表 CSS 影响。尤其注意以下三点：
-
border-collapse: collapse必须在子表上显式设为separate，否则边框会消失或加倍 - 子表
width: 100%在父表启用table-layout: fixed时可能被截断，建议改用max-width: 100%+overflow-x: auto - 子表内
<th>的字体加粗/居中等默认样式，容易和父表冲突，建议统一用类名隔离（如.child-table th）
用 <details> + <table> 替代静态嵌套，更可控也更语义化
多数所谓“嵌套需求”本质是“按需展开详情”，硬塞一个子表反而增加维护成本。用 <details> 包裹子表，既保留结构清晰度，又天然支持无障碍（<summary> 可读、键盘可聚焦），还能避免样式污染：
<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>
这个方案不需要 JS 就能切换显示状态，CSS 控制也干净：只给 .child-table 写样式，不碰父表任何规则。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
真正要嵌套时，优先考虑 colspan + 独立 <table>，而非强行塞进单个 <td>
如果子数据必须和某一行强绑定（比如“技术部”行下方紧贴展示人员列表），与其把子表塞进一个 <td> 导致列宽被撑开、对齐失衡，不如用 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>
这样子表宽度由父表总宽决定，列对齐完全可控；后续增删列也不用反复调整子表 <td> 数量。
复杂点在于语义——<details> 方案适合“可选展开”，colspan 方案适合“固定附属”，而直接嵌套在 <td> 里，最容易被当成“偷懒捷径”，结果调试两小时才发现是 table-layout 在背后捣鬼。
