旧版邮件表格易崩因混用语义标签、跨行属性及CSS替代width；需三层table结构、禁用colspan/rowspan、图片按钮等按规范重写，并共存三套响应式结构。
为什么旧版邮件表格一改就崩
不是代码写错了，是旧模板里混用了现代语义标签（比如 <div> 套 <code><table>）、<code>colspan/rowspan 跨多行、或者用 style="width: 600px" 替代硬性 width="600" 属性。Outlook 2013+ 对 colspan 解析极不稳定；Gmail 会直接忽略没写 width 属性的 <table>；而嵌套在 <code><div> 里的表格，在 iOS Mail 里可能被重排为单列堆叠。
<h3>三层结构必须手动重写，不能靠工具自动转换</h3>
<p>现有模板哪怕看着是表格，只要超过三层嵌套（比如 <code><table><table><table><tr><td>），就得拆。工具如 <code>CssToInlineStyles 或 juice 只能内联样式，救不了结构错位。
- 外层：
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> —— 不要只写 <code>style="width: 100%" - 中层：
<table width="600" cellpadding="0" cellspacing="0" border="0" role="presentation"> —— <code>width="600"是 Outlook 生存线，style写了也白搭 - 内层：每个模块（标题区、按钮区、产品列表）单独一个
<table width="600">，禁用 <code>colspan和rowspan，用空<td> 或 <code>padding控制留白分栏、图片、按钮这些高频崩点怎么修
旧模板常把两栏内容塞进一个
<tr> 里再加 <code>colspan="2"，这是雷区。真正稳的写法是放弃“逻辑分栏”，改用物理并排单元格。- 两栏布局：写
<tr> <td width="300">左</td> <td width="300">右</td> </tr>，别嵌套两个<table> <li>图片：必须同时带 <code>width="200" height="40"和style="width: 200px; height: 40px; display: block;"，缺一不可；src必须是绝对 URL（含https://） - 按钮：删掉所有
<button></button>或<a style="background:"></a>，改用<table align="center"><tr><td bgcolor="#007bff" style="padding: 12px 24px">点击确认</td></tr></table> - 文字对齐：统一用
<td align="center">，别信 <code>style="text-align: center"—— Outlook 2010 里大概率失效响应式不是加@media，是三套结构共存
旧模板里写的
@media only screen and (max-width: 600px)在 Outlook Desktop 里等于注释。真起作用的是结构级切换：桌面端用并排<td width="300">，移动端靠同一 <code><tr> 内的 <code><td width="100%"> 强制堆叠，Outlook 则靠条件注释或 <code>mso-hide: all隐藏非必要部分。立即学习“前端免费学习笔记（深入）”；
- 别删旧结构，而是把三套并列写进去：一套
class="desktop"（并排<td>），一套 <code>class="mobile"（width="100%"+display: block !important），一套class="outlook"（极简骨架） - 所有
<td> 显式加 <code>valign="top"，否则 Outlook 默认垂直居中，上下空白不可控 - 字体栈必须冗余：
font-family: "Helvetica Neue", Arial, sans-serif;，小字号 footer 优先用<font size="2"></font>，比 CSS 更稳
重构最难的不是写新代码，是忍住不加圆角、阴影、hover 效果——它们在邮件里不是加分项，是兼容性断点。每删掉一个现代 CSS 特性，模板就离 Gmail 和 Outlook 稳定显示更近一步。
- 别删旧结构，而是把三套并列写进去：一套
- 两栏布局：写
