Responsive HTML email - 3 column layout spacing for Outlook

Question

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:

SEE IMAGE:

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).

Here is the link to the entire HTML:

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

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 ----->

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.

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!

Thanks in advance for your help

EDIT: I lose this much space due to the issues in outlook

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

Answer 1

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.

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.

Place your images and text within td's and nothing else. If your using a paragraph or header tag remove it.

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

Answer 2

I understand you're structuring your tables like so to make it "responsive" so it collapses on mobile browsers

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

There is a trick to allow you to force the tables not to wrap by putting them into different columns ie:

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

and THEN change the <td> float property to float:left when in a mobile envrionment (using media queries) to let them stack instead.

See tip #5: Floating columns

http://www.creativebloq.com/responsive-web-design/build-responsive-emails-2132830

Answer 3

One of your padding tables has a width and all the other ones don't. That could possible by the issue.

If that doesn't work, I would suggest containing each table in a table cell "td", to better control their size.