HTML邮件表格在Outlook中塌陷问题求助

嘿，这种Outlook专属的表格塌陷问题简直是HTML邮件开发者的噩梦，太懂你的痛苦了！毕竟隔了10年回来搞这个，肯定没想到现在Outlook还在抱着老掉牙的Word渲染引擎不放，和现代浏览器的规则差得不是一点半点。下面给你几个针对性的解决方案，都是实战中踩过坑总结出来的：

1. 给表格+单元格双写固定宽度（绝对不能只用百分比） #

Outlook特别喜欢自动压缩没有硬设宽度的表格，哪怕你写了width:100%都可能失效。必须同时给表格和每个单元格加上固定像素宽度的HTML属性和内联CSS，再配合table-layout:fixed强制布局：

<table width="600" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed; width:600px;">
  <tr>
    <td width="200" style="width:200px;">左侧内容区</td>
    <td width="400" style="width:400px;">右侧内容区</td>
  </tr>
</table>

划重点：HTML属性（比如width="600"）和内联CSS（style="width:600px;"）双写是Outlook的专属保险，它有时候会直接忽略CSS。

2. 图片必须硬设宽高+display:block #

邮件里的图片绝对是塌陷重灾区！Outlook会无视图片的比例强行挤压，必须给图片同时加上HTML属性和CSS的宽高，再加display:block避免底部莫名其妙的留白：

<img src="your-image-url.jpg" width="400" height="300" style="display:block; width:400px; height:300px;" alt="图片描述">

3. 放弃现代布局，用嵌套表格实现复杂结构 #

别想用Flex、Grid甚至浮动了，Outlook对这些现代布局属性完全不兼容。复杂的分栏、对齐布局，老老实实用嵌套表格来做：

<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <!-- 左侧栏 -->
      <table width="200" cellpadding="0" cellspacing="0" border="0" align="left">
        <tr><td>左侧内容</td></tr>
      </table>
      <!-- 右侧栏 -->
      <table width="400" cellpadding="0" cellspacing="0" border="0" align="right">
        <tr><td>右侧内容</td></tr>
      </table>
      <!-- 强制清除对齐，避免后续内容错位 -->
      <div style="clear:both; line-height:0; font-size:0;">&nbsp;</div>
    </td>
  </tr>
</table>

4. 用cellpadding代替CSS padding（不稳定） #

Outlook对单元格的CSSpadding支持非常迷，尤其是上下内边距经常失效。建议直接用表格的cellpadding属性，或者嵌套小表格来做精准内边距：

<!-- 简单内边距用cellpadding -->
<table cellpadding="10" cellspacing="0" border="0">
  <tr><td>带内边距的内容</td></tr>
</table>

<!-- 精准内边距用嵌套表格 -->
<table cellspacing="0" border="0">
  <tr>
    <td style="padding:10px 15px;">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td>精准内边距的内容</td></tr>
      </table>
    </td>
  </tr>
</table>

5. 禁用不必要的自动换行 #

如果单元格里有长文本或连续字符，Outlook可能会强行换行挤压宽度，给单元格加这行CSS就能锁定宽度：

<td style="white-space:nowrap; overflow:hidden;">不会被挤压的内容</td>

最后提个测试小技巧：写完一定要用Windows版Outlook直接测试，在线预览工具有时候不准。另外，所有样式尽量都写成内联CSS，不要用<style>标签，Outlook会过滤掉大部分内部样式。

如果还有具体的代码片段，可以贴出来，我能帮你针对性调整！

内容的提问来源于stack exchange，提问作者somdow