Outlook 2007完全忽略表格单元格元素宽高，HTML邮件模板适配求助

兄弟我太懂你这种被Outlook邮件模板支配的痛苦了！尤其是这种看似简单的“两侧留白+中间内容”的三列布局，总能被Outlook那古董级的Word渲染引擎搞出一堆糟心事，分分钟让人崩溃。别慌，我给你一套经过无数次踩坑验证的写法，保证能在Outlook里正常显示，同时兼顾其他邮箱客户端。

核心思路：用Outlook认的“老派”table写法 #

Outlook不支持现代CSS的很多特性（比如flex、grid、max-width的部分场景），所以必须回到最原始的table嵌套+HTML属性+专用mso样式的写法，才能驯服它。

完整适配代码示例 #

<!-- 外层容器：占满整个阅读窗口宽度 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  <tbody>
    <tr>
      <!-- 左侧留白列：固定宽度，防止Outlook压缩空列 -->
      <td class="leftsidespacer" width="20" style="width:20px; mso-width-percent:0; font-size:0; line-height:0; padding:0;">
        <!-- 用1px透明占位图强制保持宽度 -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="20" height="1" alt="" style="display:block; border:0;" />
      </td>
      <!-- 中间内容列：自适应剩余宽度 -->
      <td class="content-column" style="font-family: Arial, sans-serif; font-size:16px; line-height:1.5; padding:0;">
        <!-- 内层固定宽度表格：限制宽屏时内容不会太宽，提升阅读体验 -->
        <table class="inner-table" width="600" border="0" cellpadding="20" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin:0 auto;">
          <tbody>
            <tr>
              <td>
                <!-- 这里放你的实际邮件内容 -->
                <h1>这是邮件标题</h1>
                <p>这是邮件正文，终于不用再被Outlook折磨了！</p>
                <img src="your-image-url.jpg" width="560" height="auto" alt="示例图片" style="display:block; border:0; max-width:100%;" />
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!-- 右侧留白列：和左侧对称 -->
      <td class="rightsidespacer" width="20" style="width:20px; mso-width-percent:0; font-size:0; line-height:0; padding:0;">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="20" height="1" alt="" style="display:block; border:0;" />
      </td>
    </tr>
  </tbody>
</table>

<!-- 移动端适配：窄屏时去掉两侧留白，让内容占满屏幕 -->
<style>
@media screen and (max-width: 640px) {
  .leftsidespacer, .rightsidespacer {
    width: 0 !important;
    display: none !important;
  }
  .content-column {
    width: 100% !important;
    padding: 0 10px !important;
  }
  .inner-table {
    width: 100% !important;
  }
}
</style>

关键细节解释（都是踩坑踩出来的） #

• 占位图的作用：Outlook会自动压缩空的<td>，加一个1px高的透明GIF（用base64嵌入避免额外请求），能强制td保持你设置的宽度，不会凭空消失。
• mso-width-percent: 0：专门告诉Outlook“这个列的宽度是固定像素，别瞎按百分比缩放”，防止它自作聪明把留白列搞没。
• 双层table嵌套：外层100%宽保证占满窗口，内层固定宽度（比如600px）让宽屏时内容不会拉得太宽，提升阅读体验；而且margin:0 auto能让内层table在中间列里居中，完美适配各种屏幕。
• 双写宽度属性：同时在HTML的width属性和CSS的width里写宽度，是给Outlook的双保险——它更认HTML属性，但其他客户端需要CSS。
• 移动端媒体查询：虽然Outlook移动端（比如iOS版）支持媒体查询，但桌面版不支持，所以这个样式只会在手机上生效，窄屏时自动去掉留白，让内容占满屏幕。

额外避坑提醒 #

1. 别用<div>做主要布局，全部用<table>嵌套，Outlook对div的支持差到离谱。
2. 字体用安全字体（Arial、Verdana、Times New Roman），自定义字体在Outlook里几乎不会显示。
3. 图片必须加width、height属性，还要加style="display:block;"，防止图片下方出现莫名其妙的空白。
4. 尽量用cellpadding做内边距，别在<td>上用CSS的padding——Outlook对td的padding支持不稳定，容易出现边距丢失。

按照这个写法，你的三列布局应该能在所有版本的Outlook里正常显示了。做邮件模板就是靠这些细碎的技巧堆出来的，熬过去就好了😅

内容的提问来源于stack exchange，提问作者Janus Bahs Jacquet