Removing spacing from around tables in Outlook 2007 and 2010

Uh oh! This fix has unexplainably stopped working. We recommend Email on Acid's fix instead.

Finally getting atop an annoying email rendering bug gives geeks like us near-endless, t-shirt removing satisfaction. Especially when it's plaguing our newsletters. In this instance, our adversary was 3px spacing to the left and right of tables with align="" applied to them. The stage was Outlook 2007 and 2010. While this has been a long-running issue, things really came to a head when I was coding our latest email newsletter, only to find that two text boxes nested in a table would not sit alongside each other, thanks to said gaps:

Spacing around table in Outlook 2007

Using align="" to float tables alongside each other is starting to be used as an easy way to convert a regular 2 column email design to a 'wrapped' 1 column on mobile devices. We'll cover how to do this in the blog shortly.

Anyway, after an agonizing hour or so of trying to close the gaps with padding and margin, I scheduled the campaign and walked away in defeat, knowing all too well that our Outlook-using subscribers would see the awkward gaps. Yes, I'd coaxed the boxes to sit beside each other, but it just wasn't perfect. And anyone who knows how I code email designs knows that not perfect is simply not good enough.

Time passed and things settled down. That's until a customer contacted us on the forums about the same issue.

Going gap-free

Instantly, my primordial feelings, my white-knuckled combat response returned. "There's no workaround for this." I typed. It felt like one of those scenes where the righteous cop hands over his badge and gun, locked in an expression of both impotence and rage.

There was no workaround, until another customer chimed in.

Known only as dedra and slinging a line of Microsoft Office proprietary CSS, he had a near-solution - that is, using mso properties to control spacing between elements. The brain juices started flowing. I started googling around and found the answer tucked away on Emailology, a genuine Aladdin's cave of email design treasure. To remove the spacing, simply add the following to your CSS styles...

table { border-collapse:collapsemso-table-lspace:0ptmso-table-rspace:0pt

... or inline it like so...

<table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> ... </table

... and the gaps will be no more. The end result is a great-looking email newsletter:

No gaps in Outlook 2007

Many thanks to Emailology, the mysterious dedra and all our customers on the forums for this fix. We're now free to create responsive email designs with floating tables, that look just as lovely in Outlook 2007 and 2010, as in any other email client.

Posted by Ros Hodgekiss

11 Comments

  • Justin Amphlett
    4th April

    I’ve found wrapping tables in conditional code aimed at just Outlook provides a pretty bulletproof method. Although your version uses much less code.x0ax0aSo two tables floating next to each other, with an extra table containing them:x0ax0a<!—[if gte mso 9]><table cellpadding=”“0”” cellspacing=”“0”” border=”“0”“><tr><td><![endif]—>x0aTABLE 1 HEREx0a<!—[if gte mso 9]></td><td><![endif]—>x0aTABLE 2 HEREx0a<!—[if gte mso 9]></td></tr></table><![endif]—>

  • Step
    4th April

    Thank you for this tip, this is really helpful!  x0ax0a<3 Campaign Monitor

  • CMaddict
    18th April

    Can’t wait for the blog post about ““convert a regular 2 column email design to a ‘wrapped’ 1 column on mobile devices”” ...have a campaign in the hopper that just needs this solution so it can go out…

  • CMaddict
    18th April

    Hey Ros, x0ax0aWorked a treat.. Thanks!

  • Konrad
    23rd April

    There is mistake in the text:

    Outlook 2007 and 2007


    not perfect is simply not good enough! ;-)

  • Ros Hodgekiss
    23rd April

    Haha, you got me, Konrad! Just fixed that up, thanks for spotting the typo :D

  • Paul
    3rd May

    I get strange vertical gaps in Outlook 2007 (and only this program) in the actual COPY of my newsletter, and it drives me nuts… happens often when I try to right or left align an image in a newsletter article.  Have never figured out a workaround.  E.g., might have look something like this (supposed to be ONE paragraph):

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa neque, ornare vitae imperdiet id, aliquet id ligula.

    [large gap appears here]

    Sed rutrum nunc ut quam tincidunt ac volutpat ligula aliquet. Aenean elementum tortor vitae nibh porta aliquet. Aliquam erat volutpat. Pellentesque egestas placerat elit, at blandit enim rutrum non.

    If anyone has a hack for this one, I would be MUCH appreciative.  THANK YOU.

  • Ros Hodgekiss
    4th May

    HI Paul, what you may be describing is this Outlook 2007 / 2010 space issue. The skinny is that when tables have rowspans exceeding 23.7in in height, gaps start to appear.

    Email on Acid above have a couple of suggestions, that may be of use. Let us know how you go :)

  • Mark
    10th August

    Couldn’t get Email on Acid’s new fix to work.
    But more through luck than judgement, I got my aligned left tables to play nicely on Outlook 2007/10 by adding style=“mso-table-lspace:0;mso-table-rspace:0;” to the first <td> in the tables.

  • Mark
    10th August

    Oops, that should read by: adding style=“mso-table-lspace:0;mso-table-rspace:0;” to the first td in the tables.

    Apologies.

  • Julia
    24th August

    thankyou thankyou thankyou!  Solved my table padding issues which were threatening to drive me crazy. ;)

Sign up for free.
Then send campaigns for as little as $9/month

Create an account