Outlook中HTML邮件模板背景色显示异常问题排查

问题根源 #

你的外层table设置了bgcolor="#ececec"，但内层两个td各占50%宽度且都设了白色背景，完全覆盖了外层table的背景区域，导致灰色背景无法显示。同时Outlook桌面版对CSS背景的支持有限，必须用表格属性配合嵌套结构来实现预期效果。

修复后的代码 #

<!-- 外层容器：设置灰色背景，通过cellpadding留出空白区域 -->
<table bgcolor="#ececec" align="center" border="0" cellspacing="0" cellpadding="20" style="width:100%; border-collapse: collapse;">
  <tr>
    <!-- 中层容器：白色背景，包裹内容 -->
    <td bgcolor="#ffffff" style="border-collapse: collapse;">
      <!-- 内容表格：分两列布局 -->
      <table border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
        <tr>
          <td style="width: 50%;">
            <table border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
              <tr>
                <td style="padding-left: 30px; padding-right: 10px; padding-top: 20px;padding-bottom: 20px;">
                  <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-number1.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                  <div style="vertical-align: middle; display: inline-block;">
                    <h3 style="margin: 0; padding: 0;">Australia's No. 1</h3>
                    <span>Replica lighting store</span>
                  </div>
                </td>
              </tr>
            </table>              
          </td>
          <td style="width: 50%;">
            <table border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
              <tr>
                <td style="padding-left: 30px; padding-right: 10px; padding-top: 20px;padding-bottom: 20px;">
                  <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-huge-range.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                  <div style="vertical-align: middle; display: inline-block;">
                    <h3 style="margin:0; padding:0;">Huge range</h3>
                    <span>20,000+ products</span>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="width: 50%;">
            <table border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
              <tr>
                <td style="padding-left: 30px; padding-right: 10px; padding-top: 20px;padding-bottom: 20px;">
                  <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-fast-shipping.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                  <div style="vertical-align: middle; display: inline-block;">
                    <h3 style="margin:0; padding:0;">Fast shipping</h3>
                    <span>24hr dispatch on most items</span>
                  </div>
                </td>
              </tr>
            </table>
          </td>
          <td style="width: 50%;">
            <table border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
              <tr>
                <td style="padding-left: 30px; padding-right: 10px; padding-top: 20px;padding-bottom: 20px;">
                  <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-30-days.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                  <div style="vertical-align: middle; display: inline-block;">
                    <h3 style="margin:0; padding:0;">30 days returns</h3>
                    <span>For peace of mind</span>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键修改说明 #

• 调整结构：外层table仅作为灰色背景容器，通过cellpadding="20"设置灰色背景的留白区域
• 新增中层白色背景td：将所有内容包裹在这个白色td内，确保白色内容区和灰色背景区分离
• 移除多余的bgcolor="#ffffff"：内层表格和td无需重复设置白色背景，继承中层td的背景即可
• 统一padding：将内容区的上下padding移到内层td上，确保Outlook下布局稳定

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