Outlook表格变形主因是其Word引擎重写HTML结构，需用table width属性、全内联样式、避免div和flex，并以table-layout:fixed+colgroup控制列宽。
Outlook 里表格变形，不是你代码写错了，是它用 Word 引擎硬重写你的 HTML 结构。 它会自动闭合标签、给文本塞 <p>、吃掉 padding、无视 display: flex——同一份代码在 Gmail 里看着正常，只因 Gmail 是删掉 <style> 后靠内联样式硬撑。真要稳，就得放弃“兼容”幻想，直接降级重建。
为什么 Outlook 桌面版表格会塌、错行、宽度失控
Outlook（尤其是 Windows 桌面版）不解析现代布局逻辑，它把你的 HTML 当 Word 文档处理：遇到没闭合的 <td> 就自作主张补全；看到 <div> 或裸文本直接包进 <p>；colspan/rowspan 支持极差；margin 基本无效，width 属性优先级高于 CSS width。
- 外层容器必须用
<table width="600">，不能只靠style="width:600px" -
<tr>下禁止直接写文字，所有内容必须包在<td>里 - 每行
<tr>的<td>数量必须一致，否则 Outlook 会自行补列，导致错位 - 避免嵌套过深的
<table>，超过 3 层容易触发 Word 引擎的布局异常
Gmail 里表格乱序？检查 style 是否全内联 + 图片是否带宽高
Gmail 不是“不支持 CSS”，而是直接剥离整个 <head> 和所有 <style> 标签，只认 属性。哪怕你写了 class="wrapper"，它也当不存在。
- 所有样式必须写成内联：
<td style="font-family:Arial,sans-serif; line-height:1.4;"> -
<img>必须同时带width和height属性（不是仅写style），例如：<img src="..." width="300" height="200" style="display:block;"> - 字体栈补全：
font-family: 'Open Sans', Helvetica, Arial, sans-serif;，否则 Windows 缺失字体时崩成 Times New Roman - 颜色别写
#000，写全color:#000000;，某些客户端会截断简写
响应式在邮件里怎么落地：不是一套代码通吃，而是条件性降级
真正的响应式邮件 = @media 给 iOS Mail / Gmail App 加断点 + width="100%" 表格兜底给 Outlook。别指望 flex 在任何客户端生效。
立即学习“前端免费学习笔记（深入）”；
- 外层
<table>加role="presentation"，避免屏幕阅读器误判为数据表 - 媒体查询只写
@media screen and (max-width: 600px)，不要嵌套或加min-width - 移动端堆叠靠嵌套：
<td><table width="100%"><tr><td width="50%">左</td><td width="50%">右</td></tr></table></td> - Outlook 桌面版不认
@media，所以它的 fallback 必须是纯属性控制的表格结构，不是 CSS 规则
最常被忽略的点：不是“有没有写内联样式”，而是“有没有把每个 <p>、<span>、<a> 都显式设了 margin 和 line-height”。Outlook 默认会给 <p> 加上下边距，Gmail 会忽略 line-height 继承，Yahoo 要求 line-height 必须穿透到 <td> 和内部 <p> 两层——漏一层，文字就挤在一起或飞出去。
