The table align method as described in an earlier blog post is a great way to optimise emails consistently in mobile devices. The huge drawback is that MS Outlook doesn’t really care much for tables floating around side by side. It can cause all kinds of strange things to happen across the full range of MS Outlooks. Here is a solution and some of the hacks you can use to minimise the damage if you prefer using this method:
1. Ghost a column between the blocks
<td> Table X <!--[if mso]></td><td><![endif]--> Table Y </td>
Using conditional statements, you can say IF Microsoft Outlook rendering THEN add a closing td and start a new one. ELSE is ignored. Turns 2 tables next to each other into one 2 column table. See the codepen here: http://codepen.io/actionrocket/pen/DdhCm/
All the other fixes are essentially halfway houses which try to make it better but never offer pixel perfect solution. For the sake of completion, and because we have all spent long enough doing them already, here they are in brief:
2. Adding MSO specific style to reduce padding
There are a few MSO rules that can reduce the amount of padding added, but doesn’t provide a perfect solution everywhere.
This can be expanded upon:
style="border:none;mso-border-right-alt:solid #XXXXXX .5pt;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;
Whereby we add a .5pt of a solid colour to the right hand side of the block. This is a way of eliminating/lessening a small amount of opaque padding which seems to appear in a text box. Just looking at this old hacky fix is making me feel queasy. I personally have unconditional love for conditional statements.
3. Making sum widths = less than container total
This is a very pure solution, but also messes with the alignment of your desktop email everywhere that isn’t Outlook, unless designed to take up the slack.
What other crazy methods have you used? I have seen percentages used quite effectively to make a more flexible container holding aligned tables.