html email tables have added padding or margin

Question

I am having an issue in Outlook 2007/10 when coding an email. I am getting added padding/margin between my tables and cant see what it could be. I have one big tables, with 3 tables inside it, all aligned left. I would have put them in seperate td's but need them to be out of the td's for it to work how i want responsively.

I have added border-collapse:collapse and border-spacing:0px to every table and all the cellpadding and spacing is set to 0. All my code is inline. This gap doesn't show in any other clients.

Any ideas?

Have attached diagram of my tables.

Answer 1

Aligning (floating) tables will often cause a few pixels worth of gap, particularly in Outlook. Try adding this to your page:

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

From memory, this doesn't remove it fully - there is still a stubborn 1px line, which is fine, unless you are using background colors that make it obvious. To get rid of it completely you'll have to play around with adding a border also, which is kinda silly, but that is Outlook for you...

However, for responsive, I'd recommend you go with the <td>'s instead, and just toggle width:100%; display:block; in the media query to control them responsively. Here is a basic example