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

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

现在在其他一切(浏览器和其他客户端)中，我能够将表格均匀地间隔到容器的边缘，而最后一列不会落到下一行:

查看图像:

example of element moving to next line

你会从图像中注意到第二组列是我想要实现的，但不必大幅减少表格之间的间距就可以在 Outlook 中工作，因为这当然会影响所有其他客户端和让 table 看起来靠得很近。 (只是在 Outlook 中不靠在一起)。

这是整个 HTML 的链接:

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

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

我还阅读了关于 Acid 和其他服务的电子邮件丢失的帖子，其中有很多关于 outlook 错误等的注释，但我根本找不到解决这个问题的方法!

预先感谢您的帮助

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

最佳答案

我知道您正在像这样构建您的表格以使其“响应式”以便它在移动浏览器上折叠

<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>将属性(property) float 到float:left在移动环境中(使用媒体查询)让它们堆叠起来。

请参阅提示 #5: float 列

关于html - 响应式 HTML 电子邮件 - Outlook 的 3 列布局间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21238755/