HTML邮件模板在Outlook渲染异常，如何实现与Gmail一致显示效果？

问题出在你给<td>设置了display: block，Outlook桌面端（Windows版）基于Word渲染引擎，对这种修改表格单元格默认display属性的CSS支持极差，会直接导致布局错乱。以下是调整后的代码，可同时兼容Outlook和Gmail，保持一致的显示效果：

<table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;">
  <tr style="background-color: #ececec;">
    <td style="width: 30%; border-bottom: 2px solid #ccc; padding: 5px;"></td>
    <td id="title" style="width: 40%; padding: 5px; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td>
    <td style="width: 30%; border-bottom: 2px solid #ccc; padding: 5px;"></td>
  </tr>
</table>

关键调整说明： #

• 移除所有<td>上的display: block属性，保持表格单元格原生的display: table-cell默认值，这是兼容Outlook的核心前提。
• 给左右两个<td>明确设置宽度（各30%），配合中间单元格的40%，确保总宽度占满父容器，布局更稳定可控。
• 将背景色统一设置在<tr>标签上，避免重复定义的同时，Outlook对行级背景色的支持比单元格更可靠。
• 保留原有的下划线样式和内边距参数，确保视觉效果与Gmail端完全一致。

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