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

【问题标题】：Outlook collapse of table cells in HTML emailsHTML 电子邮件中表格单元格的 Outlook 折叠
【发布时间】：2011-06-17 18:01:45
【问题描述】：

我遇到了这个问题，但还没有找到解决方案。使用 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 中导致单元格宽度折叠的设置。通常，它只发生在我们公司 CEO 的 Outlook 中。我不再以这种方式编写带有副本的单元格，因为我有一种更可靠的工作方式，但有时营销人员认为他们知道他们在做什么，并在我知道它会工作时更改我认为它会工作的代码不在 Outlook 中 CEO 的计算机上。

有人知道 Outlook 中的什么设置会导致这种情况吗？我很想在我的电脑上安装这个设置，所以我不需要 CEO 来测试它。

【问题讨论】：

处理同样的问题。当你发现时，请发布你的答案。据我所知，查看在 Outlook 中呈现的 HTML 的源代码。这些表格有我未指定的新尺寸，以磅为单位！
1) 宽度（拼写正确时）不应具有 CSS 样式。宽度以像素为单位指定 (width="80") 或者您可以指定百分比 (width="20%") 2) 添加到空元素中 3) 为任何有文本的元素添加内联 CSS (style="font-size;NNpx; line-height:NNpx;")，即使它是一个不间断的空格，最后，声明 background-color (bgcolor="#FFFFFF") 使用 6 长度 HEX，无论项目是否有内容，因为 Outlook 对未着色单元格的处理很差。有关其他提示，请参阅 CampaignMonitor 网站。

标签： outlook html-email html-rendering

【解决方案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>

然后，其下方的行符合该顶行的列宽。

【讨论】：

这并不是关于“代码是否正确”，它更多地与导致它的 Outlook 中的设置有关。我知道它为什么会发生，我不知道 Outlook 中导致表格崩溃的设置是什么。我永远不会这样编码。市场营销人员喜欢在不应该的时候弄乱代码，因为他们认为他们知道自己在做什么。我只是不想打扰公司的首席执行官，只是为了获得证据/例子来证明营销他们错了。我希望在我的计算机上启用该设置。
是的，我也在营销部门工作，我知道这是怎么回事！因此，我假设一个人无法控制收件人的个人电子邮件客户端的设置，需要一种“安全”的编码方式，尽可能广泛地工作。对不起，我误解了这个问题。问题是，我不确定 Outlook 中是否有可用的设置来改变这种行为——它可能隐藏在 Outlook 的 HTML 渲染引擎中，AFAIK 不提供用户配置选项。如果更大的 Outlook 专家知道不同，我希望他们发布更好的答案。
蛮力（1px 图像）在较新版本的 Outlook 中失败，使单元格扩展。如果单元格中没有内容，我建议添加细胞内。另外，避免colspans。 activecampaign.com/email-design-guide
避免 colspans 会变得很麻烦（但当然是可能的，我想有足够的嵌套表），但是是的，我发现透明的 1x1 gif 不起作用，用填充单元格会。

【解决方案2】：

我在 Outlook 2013 for Windows 中遇到了这个问题。它在 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>

【讨论】：