HTML 电子邮件模板 Outlook 渲染问题

Answer 1

您需要 2 行表格布局。不幸的是，

rowspan

在 Outlook 中不能很好地工作。您仍然可以在表格单元格内添加适当的内容。然后您应该从表格单元格中删除大部分样式。在这些单元格上使用

display: block

，然后在它们上重新声明

display: tabel-cell

是没有意义的。直接使用默认即可。

最后但并非最不重要的一点是，您必须使用

&nbsp

将内容添加到表格单元格，否则它们会折叠。

我还将

background-color

从单元格移至表格本身。

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