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

Question

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

现在，在其他所有内容（浏览器和其他客户端）中，我都可以将表均匀地排列到其容器的边缘，而最后一列不落到下一行：

查看图像：

元素移至下一行的示例

您会从图像中注意到，第二组列是我要实现的目标，而不必大幅度减少表之间的间距，因此它可以在Outlook中工作，因为这当然会影响所有其他客户端并制作表看起来很靠近。 （只是在Outlook中并没有在一起）。

这是整个HTML的链接：

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

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

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

在此先感谢您的帮助

编辑：由于前景问题，我失去了这么多空间

Answer 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属性更改为float:left ，以使其堆叠。

参见技巧5：浮动列

Answer 2

您的填充表之一具有宽度，而其他填充表则没有。 这个问题有可能实现。

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

Answer 3

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

将尺寸分配给父表的总宽度。 确保您有表格，表格td：border-collapse：collapse; 在CSS中，所有表格的边框都为零，border = 0，cellspacing = 0，cellpadding = 0（需要调整填充的地方除外）。

将您的图片和文字放在TD中，别无其他。 如果您使用段落或标题标签，请将其删除。

如果以这种方式构造表，则直到需要时它都不会包装。