Outlook 折叠 HTML 电子邮件中的表格单元格

Question

我遇到过这个问题，但尚未找到解决方案。对于 html 电子邮件，我发现在某些 Outlook 程序中它会折叠单元格。都是 2007/2010 例如：

<tr>
    <td width="10"><img></td>
    <td width="80">Copy</td>
    <td width="10"><img></td>
</tr>

发生的情况是 Outlook 忽略中间列单元格的宽度。如果我使用 CSS 来设置宽度也没关系。

<tr>
    <td style="width:10px;"><img></td>
    <td style="width:80px;">Copy</td>
    <td style="width:10px;"><img></td>
</tr>

这有相同的结果。

我无法弄清楚的是 Outlook 中的设置导致单元格宽度折叠。通常，这只发生在我们公司首席执行官的 Outlook 中。我不再以这种方式编写带有副本的单元格，因为我有一种更可靠的工作方式，但有时营销人员认为他们知道自己在做什么，并更改了我的代码，认为它会起作用，而我知道它会起作用不在 CEO 计算机上的 Outlook 中。

有人知道 Outlook 中的什么设置会导致此问题吗？我希望在我的计算机上拥有此设置，这样我就不需要首席执行官来测试它了。

Answer 1

您能否提供一个更广泛的代码示例，包含整个表格而不仅仅是一行？将有助于给出为什么会发生这种情况的线索。

无论如何，在 Outlook 中对我有用的方法是在表格中添加顶行，强制列宽达到精确的高度。 1x1 透明 GIF，除了表格单元格宽度之外还设置了宽度，似乎是一种“强力”方法，甚至 Outlook 也会听：

<table>
  <tr>
    <td width="10" height="1"><img width="10" height="1" /></td>
    <td width="80" height="1"><img width="80" height="1" /></td>
    <td width="10" height="1"><img width="10" height="1" /></td>
  </tr>

然后下面的行与顶行的列宽一致。

Answer 2

我在 Windows 版 Outlook 2013 中遇到了这个问题。它在 Outlook for Mac（以及 Gmail，以及几乎所有其他现代电子邮件客户端）中运行良好，但在 Outlook 2013 for Windows 中，它会完全崩溃一切。

解决方案很简单：如果您声明像素宽度（内联样式除外），请不要输入 px。你必须是真正的老派。这是我的最终（工作）代码：

    <table cellspacing="0" cellpadding="0" border="0">
    <tr>

    <td width="1" align="left" valign="top" bgcolor="#ffffff"><img src="#"></td>
    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 1</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none; text-decoration: none;" href="#">SECTION 2</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 3</a></span></td>

    <td width="149" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 4</a></span></td>

    </tr>
    </table>