响应式HTML电子邮件 - Outlook的3列布局间距 [英] Responsive HTML email - 3 column layout spacing for Outlook

问题描述

我试图完善一个3列布局，我在表之间的间距有一些问题，但问题只出现在Outlook 2007,10,13

I'm trying to perfect a 3 column layout and I'm having some issues with the spacing between the tables but the issue only appears in Outlook 2007,10, 13

现在在其他任何地方（浏览器和其他客户端），我可以均匀地将表格放置到容器的边缘，而最后一列不会落到下一行：

Now in everything else (browsers and other clients) I'm able to evenly space the tables to the edge of their container without the last column falling to the next line:

查看图片：

你会注意到，第二组列是我想要实现的，但不必大幅减少表之间的间距所以它可以在Outlook中工作，因为这当然影响所有其他客户端，使表看起来非常接近在一起。

You'll notice from the image the second set of columns are what I'm aiming to achieve but without having to drastically reduce the spacing between tables just so it can work in Outlook as this of course affects all the other clients and makes the tables look very close together. (just not close together in Outlook).

以下是指向整个HTML的链接：

Here is the link to the entire HTML:

http://jimharrison.co.uk/wp-content/uploads/ 2014/01 / email.html

请查看代码 - 您将要查找的是190宽度的表然后在表上方注释< ---- padding + outlook ----->

Please have a look at the code - what you're going to be looking for specifically are the tables with 190 width and then a comment above a table <----padding + outlook ----->

注意：你会注意到第一个< ---- padding + outlook -----> 表不一样，这是因为我'

NOTE: you'll notice that the first <----padding + outlook -----> table isn't the same and that's because I'm playing around with it to try and find a fix for the issue.

我还阅读了关于Acid和其他服务的电子邮件中的遗漏的帖子，并提供了许多注意事项

I've also read lost of posts from Email on Acid and other services with lots of notes on outlook bugs etc but I simply can't find a resolution for this!

预先感谢您的帮助

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

I lose this much space due to the issues in outlook

http://jimharrison.co.uk/wp-content/uploads/2014/01/space.jpg

推荐答案

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

Modify your table structure so you have each box contained within a table and each of the 3 tables are contained within a single row separated into separate columns. Leverage cellpadding on the inner tables And cellpadding on the parent table to achieve the required spacing rather than using an empty space or set dimensions.

将尺寸分配为总计父表的宽度。确保你有table，table td：border-collapse：collapse;在你的CSS和所有的表是零'出去与border = 0，cellspacing = 0，cellpadding = 0（除非你需要调整填充。

Assign dimensions to nothing other than the total width of the parent table. Make sure you have table, table td:border-collapse:collapse; in your CSS and all your tables are zero'd out with border=0, cellspacing=0, cellpadding=0 (except for wherever you need to adjust the padding.

如果你以这种方式构造你的表格，它不会包装你的图片和文本在td和没有别的。直到你想要它。

If you structure your table in this way it won't wrap until you want it to.

这篇关于响应式HTML电子邮件 - Outlook的3列布局间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！