三层<table>嵌套是唯一可靠布局方案：外层100%宽、中层600px固定宽、内层分模块独立<table>，因Outlook用Word引擎不解析<div>，Gmail剥离<style>，Apple Mail无视class/id，仅<table>能跨客户端稳定控制对齐与宽度。
必须用三层 <table> 嵌套，且每层职责固定——不是“能用表格就行”，而是错一层，Outlook 和 Gmail 就开始错位、空白或静默崩塌。
为什么 <table> 是唯一可靠布局载体
Outlook 桌面版用 Word 渲染引擎，根本不解析 <div>；Gmail 会整块剥离 <style> 标签；Apple Mail 对 class 和 id 基本无视。你写的 <div class="header">Hello</div> 在这三端等于没写。display: flex、@media、max-width 全部被忽略或直接导致整段塌陷。<table> 是目前唯一能在所有主流客户端（Outlook Desktop、Gmail Web/iOS/Android、Apple Mail、Yahoo、QQ 邮箱）中稳定控制对齐、宽度、堆叠顺序的 HTML 元素。
常见错误现象：<p style="margin-top: 20px"> 在 Gmail 中留白消失；<td align="center"> 不生效，除非父 <table> 也显式设 align="center"；<img> 缺少 width 和 height 属性，在 Outlook 里会被拉伸变形。
三层嵌套结构怎么写才真正稳
外层容器（100% 宽）、中层固定宽（600px）、内层内容块——这是实测安全上限，超三层在 iOS Mail 和 Samsung Email 中会触发重绘逻辑压垮，表现为文字换行异常、valign 失效、整列偏移，且不报错，只静默错乱。
立即学习“前端免费学习笔记（深入）”；
- 外层：
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">—— 必须用width="100%"，不能只靠style="width: 100%" - 中层：
<table width="600" cellpadding="0" cellspacing="0" border="0" role="presentation">——width="600"比style="width: 600px"更可靠，Outlook 2013/2016 直接忽略后者 - 内层：每个逻辑模块（标题、按钮、图文卡片）都单独拆成一个
<table>，包裹在<tr><td>中，禁用colspan/rowspan（Outlook 2013+ 渲染极不稳定，宁可用空<td>占位）
分栏与响应式不能靠 CSS，得靠结构切换
横向分栏别用 float 或 inline-block，改用并排 <td width="300">；需要移动端堆叠？不是加 @media，而是再套一层 <table>，让该层在小屏下 width="100%" 强制单列。
Gmail Web 和 iOS Mail 支持 @media only screen and (max-width: 600px)，但 Outlook Desktop（2016–2024）完全无视它。所谓“响应式”，其实是三段式结构共存：
• 桌面结构：并排 <td>，设固定宽
• 移动端结构：用 class="stack-column" + @media 把并排 <td> 变成 display: block !important（前提是这些 <td> 已包裹在同一个 <tr> 内）
• Outlook 降级结构：用 mso-hide: all 和条件注释，让 Outlook 只看到最简骨架
内联样式不是“推荐”，是唯一生效路径
<style></style> 在 Gmail 里被整块剥离，Outlook 直接无视，Yahoo Mail 删掉 @media 以外的所有规则。所有样式必须写进 style 属性，且不能简写：
-
<td>是样式主力载体：文字颜色、背景、内边距都写在它上面；<p>和<span>只作语义补充，别指望它们撑布局 - padding 必须显式声明单位：
padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成padding: 12px 16px; - 字体必须带单位：
font-size: 14px;、line-height: 20px;，line-height: 1.4在 Gmail 中会被误读为1.4em - 背景色优先设在
<table bgcolor="#f0f0f0">上，<td style="background-color:#f0f0f0">在 Outlook 里渲染不可靠
真正难的不是写出来，是在删掉 70% 的现代 CSS 后，还能让信息清晰、操作可达、品牌可辨——而最容易被忽略的，恰恰是那个没写 width="600" 的中层 <table>，它不会报错，但会在 Outlook 里悄悄缩成 300px 宽。
