嵌套table必须放在td或th内，否则会被浏览器移出tr；子表需重置border-collapse为separate；移动端用嵌套表模拟卡片布局；嵌套超两层应重构结构。

为什么嵌套 <table> 不能直接写在 <code><tr> 里 <p>浏览器会把直接塞进 <code><tr> 的 <code><table> “踢”出 DOM 结构——不是丢到主表外面，就是被塞进隐式 <code><tbody>，导致子表完全不显示在目标单元格内。你用 <code>document.querySelector('table.nested') 查不到，给 tr > table 写的 CSS 也全无效。

真正合法的位置只有一个：<td> 或 <code><th> 的内容体内部。哪怕你要占满整行，也得先用 <code>colspan 合并单元格，再把子表完整写进去。

• 错误写法：<tr><table class="nested">...</table></tr>
• 正确写法：<tr><td colspan="2"><table class="nested">...</table></td></tr>

子表边框消失或错乱？必须重置 border-collapse

父表若用了 border-collapse: collapse（比如 Bootstrap 邮件模板或自定义 reset），子表会继承该值，结果边框被“吃掉”：要么全无，要么粗细加倍。这不是 bug，是 CSS 层叠的必然行为。

解决方案不是靠继承，而是显式覆盖：

• 给子表加 style="border-collapse: separate !important;"
• 避免对子表设 width: 100%；改用 max-width: 100% + overflow-x: auto（尤其当父表用了 table-layout: fixed）
• 子表内的 <th> 默认加粗居中，易和父表冲突，建议加类名隔离，例如 <code><th class="child-th"> 并配内联样式 <h3>移动端堆叠卡片式布局：用嵌套表模拟，而非依赖 <code>@media

  Gmail App、iOS Mail 和 Outlook 基本忽略 @media 查询，viewport 标签也常被无视。所谓“响应式表格”，本质是结构重构：桌面端用多列表格，移动端把每行变成垂直堆叠的卡片。

  

  HTML Extract

  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

  下载

  实现要点：

  • 外层主表设 role="presentation"，明确仅为布局用途
  • 每行数据用一个 <tr>，对应一个“卡片”；<code><td> 内部用嵌套 <code><table> 模拟卡片结构（标题/值分两行） <li>关键兼容处理：对 Outlook 加 <code>mso-hide: all，对其他客户端用 display: none / display: block 控制显隐（注意 Gmail Web 版不支持 display: table-row）
  • 所有样式必须内联，包括字体、行高、padding——<style></style> 标签在多数客户端中会被剥离

  嵌套超过两层就该警觉了

  三层嵌套 <table> 在 Outlook 中渲染极不稳定，DOM 层级过深还会拖慢加载，且几乎无法调试。邮件模板不是 HTML 结构竞赛，嵌套本身没有价值，只是妥协手段。 <p>真要展示明细数据（如订单+子项+SKU），优先考虑：</p> <ul> <li>用 <code><details><summary></summary></details> 实现点击展开（部分客户端支持，语义更清晰）

  • 拆成多个独立模块，用 <table> 并列排布，靠 <code>cellspacing 和 padding 控制间距
  • 把复杂结构后移至网页落地页，邮件只放摘要 + 链接

  嵌套本身不难，难的是它掩盖了结构设计缺陷——一旦你开始数 <table> 嵌了多少层，说明该重新梳理信息层级了。</table>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！