响应式 HTML 电子邮件 - Outlook 的 3 列布局间距答案

【问题标题】：Responsive HTML email - 3 column layout spacing for Outlook响应式 HTML 电子邮件 - Outlook 的 3 列布局间距
【发布时间】：2014-01-20 16:08:33
【问题描述】：

我正在尝试完善 3 列布局，但表格之间的间距存在一些问题，但该问题仅出现在 Outlook 2007、10、13 中

现在在其他所有内容（浏览器和其他客户端）中，我能够将表格均匀地分配到其容器的边缘，而最后一列不会落到下一行：

查看图片：

您会从图像中注意到第二组列是我的目标，但不必大幅减少表格之间的间距，以便它可以在 Outlook 中工作，因为这当然会影响所有其他客户端和使表格看起来非常接近。（只是在 Outlook 中不紧密）。

这是整个 HTML 的链接：

请查看代码 - 您要查找的具体内容是宽度为 190 的表格，然后在表格上方添加注释 <----padding + outlook ----->

注意：您会注意到第一个 <----padding + outlook -----> 表不一样，这是因为我正在使用它来尝试找到解决问题的方法。

我还阅读了有关 Acid 和其他服务的电子邮件丢失的帖子，其中包含很多关于 Outlook 错误等的注释，但我根本找不到解决方案！

提前感谢您的帮助

编辑：由于 Outlook 中的问题，我失去了这么多空间

【问题讨论】：

【解决方案1】：

我了解您正在这样构建表格以使其“响应”，以便在移动浏览器上折叠

<wrapping table><tr>
  <td><table1><padding table><table2><padding table><table3></td>
</tr>
</wrapping table>

有一个技巧可以让您通过将表格放入不同的列来强制表格不换行，即：

<wrapping table><tr>
<td><table1></td><td><table2></td><td><table3></td>
</tr>
</wrapping table>

然后在移动环境中（使用媒体查询）将 <td> 浮动属性更改为 float:left 以让它们堆叠。

请参阅技巧 #5：浮动列

【讨论】：

【解决方案2】：

修改您的表格结构，使每个框都包含在一个表格中，并且 3 个表格中的每一个都包含在一个单独的行中，分隔成单独的列。利用内表上的单元格填充和父表上的单元格填充来实现所需的间距，而不是使用空白空间或设置尺寸。

将尺寸指定为父表的总宽度。确保你有表格，表格 td:border-collapse:collapse;在您的 CSS 中，您的所有表格都归零，border=0、cellspacing=0、cellpadding=0（除了您需要调整填充的地方。

将您的图像和文本放在 td 中，仅此而已。如果您使用段落或标题标签，请将其删除。

如果你以这种方式构建你的表格，它不会换行，直到你想要它。

【讨论】：

谢谢 - 这个解决方案确实有意义。我想知道，也许 Outlook 是否有表格或其他东西的最小宽度？我知道它的高度低于 15 可以通过添加 line-height 和 font-size 来修复。有什么与宽度相似的吗？（我试过字母间距）。
据我所知，只要超过 3 像素，您应该对任何东西（宽度或高度）都很好。作为我自己的通用标准，在为间距创建严格的表格时，我将 td 的尺寸设置为 3 像素，并尝试使用表格的 cellpadding 属性来实现我需要的大小，这将得到普遍尊重。我通常只创建表格分隔符来垂直分隔内容，尽管像这样
如果您创建一个表格分隔符来水平或垂直分隔内容，您应该考虑是否可以首先使用周围的表格单元格填充来实现相同的效果。而且，如果您使用我之前评论中的方法，则无需添加 gif 分隔符，早在 Outlook 07 中，没有客户端会像我构建的那样折叠表格。
我明白你在说什么 - 如果我想要实现的样式可以使用基本 HTML 而不是 CSS，那么使用 HTML。我要将表格放入列中，并使用 cellpadding 应用填充以使其正常工作。完成后会报告！
是的，让我知道进展如何。抱歉，我太忙了，我什至没有机会查看您的代码，但我打算明天再查看。

【解决方案3】：

您的一个填充表有宽度，而其他所有的都没有。这可能是由问题造成的。

如果这不起作用，我建议将每个表格包含在表格单元格“td”中，以更好地控制它们的大小。

【讨论】：

是的，第一个填充表是不同的，因为我正在尝试改变宽度以试图让 Outlook 响应不同的样式，但似乎总是有 17px 左右的最小宽度。注意：图像并没有显示我的问题，只是我尝试解决它 - 我可以将所有列放在一行上，但结果不会到达容器的边缘。我希望这是有道理的！