必须用三层<table>嵌套,因iOS Mail和Samsung Email对DOM层级敏感,四层以上会静默错位;外层100%宽、中层600px固定宽、内层内容块,<td>禁用margin而用padding或空<td>留白,响应式靠三段式结构共存。

直接用 <table> 写邮件正文,不是“能凑合”,而是 Outlook Desktop 和 Gmail 的唯一可信赖布局方式。其他方案在发出去那一刻就注定错位或塌陷。
为什么必须用三层 <table> 嵌套
不是为了“结构好看”,是 iOS Mail 和 Samsung Email 对 DOM 层级敏感,四层以上嵌套会静默错位——文字换行异常、valign 失效、整列偏移,不报错但内容不可读。
- 外层:
<table width="100%">,负责背景色和居中上下文 - 中层:
<table width="600">,固定宽度容器,width属性必须写,不能只靠style="width: 600px" - 内层:每个模块(标题、按钮、图文块)单独一个
<table>,宽度设为600或300,禁用colspan/rowspan
<td> 上的对齐和留白怎么写才生效
text-align 在 Outlook 2010 中大概率失效,margin 在所有主流客户端都无效——Gmail、Outlook、Yahoo 全部忽略。
- 居中必须组合:
<td align="center"><table align="center">,单写align或单写style都不稳 - 留空隙不用
margin,改用padding或插入空<td width="20"></td> - 文字左/右/居中统一用
<td align="left">,别信style="text-align: left"
图片、按钮、字体这些“小东西”最容易翻车
它们不是独立元素,而是寄生在 <td> 里的“附属品”。漏掉任一硬性属性,Outlook 就归零尺寸,Gmail 就丢样式。
立即学习“前端免费学习笔记(深入)”;
- 图片必须同时写:
<img width="200" height="40" style="width: 200px; height: 40px;">,缺任意一项,Outlook 渲染为 0×0 - 按钮不能用
<button>或 CSS 背景色,得用模拟表格:<table><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table> - 小字号 footer 优先用
<font size="2">,比font-size: 12px在旧版 Outlook 中更稳
响应式不是靠 @media,而是靠三段结构共存
Gmail Web 和 iOS Mail 支持 @media only screen and (max-width: 600px),但 Outlook Desktop(2016–2024)完全无视。所谓“响应式”,其实是三套结构并存,由客户端能力自动择一渲染。
- 桌面结构:并排两个
<td width="300">,靠width控制分栏 - 移动端结构:同一
<tr>内两个<td>,加 class="stack-column" +@media把它变成display: block !important - Outlook 降级结构:用
mso-hide: all和条件注释包裹最简骨架,让它只看到单列表格
越想让它“看起来高级”,越容易在发出去后发现按钮消失、图片不显示、文字堆叠——真正难的不是加功能,是在删掉 70% 的现代 CSS 后,信息依然清晰、操作依然可达。



















