Responsive Html Email - 3 Column Layout Spacing For Outlook

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

Solution 1:

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

<wrapping table><tr>
  <td><table1><paddingtable><table2><paddingtable><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:

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

Solution 2:

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.

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