3 Ways to Remove Unwanted Gaps Between Tables in Outlook 2007 and 2010

61 thoughts on “3 Ways to Remove Unwanted Gaps Between Tables in Outlook 2007 and 2010”

1. Thank you very, very much!!!

2. I was trying to float tables left and right using align left and align right to make my email templates responsive on mobile. Discovering that outlook 2007 and 2010 was breaking the layout was frustrating and you can see that it creates these gaps and extra spacing between them, breaking the float. This solution is just what I had been looking for.

3. Thanks! After implementing these changes I did initially have some odd behavior in Gmail. Adding “margin:0;” to the paragraph tags did the trick.

4. Life saver, thank you!
   Like Lewis, I was also making a mobile adaptive layout.
   FYI, I was directed to this article from Campaign Monitor:
   http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010

   Cheers!

5. A fix I use is a little bit different.

   table align=”left” cellpadding=”0″ cellspacing=”0″ border=”0″ style=”border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;”>

   left content

   right content

6. This works, but the issue comes when there are 2 tables inline, one that contains image and one with a text bloc and solid bg color.

   It is very tricky if you don’t need a border around your images…

   BTW, border-left and border-right will do the work (no need for border on top and bottom)

   Instead of

   I used and it works just fine.

7. The fix here works great in Outlook 2010 except when the first column is too long. Does anyone know more about this Outlook problem?

   When the first column reaches a certain length, Outlook refuses to place the inline columns side by side, insstead pushing the second one far down. Below is a simplified collection of HTML that will demo this problem. It would be nice to hear that I just need a certain something added to the code to make Outlook behave, but I don’t know what it is.

   Open this code in IE, choose File/Send Page by Email, then view it in Outlook 2010. If you remove a single X-br, it will display correctly, at least on my Win 7 computer. Thanks for any help.

   —–

   content content here

8. This works, thanks!

   I changed the div to a p element and it seems to have the same effect. The only difference is that in browsers that don’t like a table sitting inside a p (chromium), there will not be any margin on the p element that it duplicates to try and repair the DOM.

   Thanks!

9. Unfortunately, the code I entered before did not display the way it previewed, so my apologies for wasting so much space.

   My general problem can be easily duplicated. All it takes is two tables side by side in the manner discussed here, prepped for mobile stacking. Once the content in the first table becomes lengthy enough, Outlook 2010 won’t render it correctly.

   Has anyone encountered this? Any solutions?

10. I’m having the same problem as Michael. Two tables side by side within a table cell using align=left; everything works fine in Outlook until the left column hits a certain length, at which point the layout breaks (the right column will jump about 900 px lower than the left column, when they should be top aligned). Frustrating, particularly since our office uses Outlook…. have tried everything I can think of, with no luck!

11. The fix from Daniel works great when there are 2 images inline…
    (style=”border:none; mso-border-right-alt:solid #99CCFF .5pt; border-collapse:collapse;”)

12. Alicia- Thanks for the confirmation. I’ve accepted this is an Outlook limit, and feel in general most emails should be short enough to avoid this anyway. One odd thing- I have seen a single recipient whose Outlook 2010 broke an email this way when nobody else’s did. The email rendered fine in all browsers, but this person’s Outlook still did the “send the second column down south” routine. I’m baffled by these and feel there is no “fix” but I’d like to read some day about the conditions that lead to this Outlook behavior, and how they can vary.

13. Thank a lot Marko and Daniel
    This is the code of my two columns layout using images that is working absolutely fine in Outlook 07 / 10

14. McArthurGlen- Your code doesn’t work for me unless the table witdh is made wider than 600. 604 works. Additionally, if you remove that blue background, you can see a one-pixel blue line on the right side of the first table. Can you account for this? Perhaps you could provide some code that could be copied into an HTML file and opened. Right now I have to put in an img tag for the images- perhaps something is wrong there.

15. Hi Michael,
    This is the last version of the code. This is still working fine for me – let me know if you have any issues diplaying the images
    Cheers
    Danilo

16. Hi, I tried to apply the fix from Daniel, but now with the 4 tables inline. It Doens’t work unless I reduce the size of one able by 2px. So 4*150px won’t work, but 3*150px+152px works…

17. Are most of you using td display:block for mobile stacking? I think I’ve been working things in a very roundabout way and this thread is useful particularly when you want to get rid of the table spacing.

18. Hooray! Step 3 saved my life.

    By the content, I have two tables side by side to accomplish a responsive layout: using media queries, I change the table’s width to 100% (can’t get td display:block to work on Mail on iOS – works on the browser, but breaks the minute I sent it as an email).

19. Michael – I came across this issue last month. apparently, Outlook has a height restriction of 23.7 inches. But if you define a height value in the long column’s

    tag, say it works. I know it’s a funky fix but it is what it is with Outlook. Companies should just ban Outlook.

20. good post

21. Hi, actually i use

    display:block and i haven’t gap between my on outlook but here is my problem :
    i have 1

    and 2 inline

    in it. I want to resize them for mobile and put 1

    per line but they stay on the same line. There is a way to force the second

    to go under the first on mobiles ? My email design force me to not use the 2 with border…

22. Christopher,
    From my understanding of responsive layouts, anythin you want to knock down needs to be in its own table. LOTS of table involved. 🙂

23. @Christophe
    Maybe this is helpful:

    3 col. table:

    asd

    asd

    asd

    CSS in de head:

    <style type=”text/css”>
    @media only screen and (max-width: 568px) {
    table[class=full_width] {
    width:100%!important;
    height:auto!important;
    }
    td[class=floatLeft] {
    width:100%!important;
    max-width: 100%!important;
    float:left!important;
    }
    }
    </style>

    Don’t forget the viewport meta tag:

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

24. Thanks for this!! Great fix for the aligning table spacing issues in Outlook 2007+!!

25. I just added

    style=”mso-table-lspace:0;mso-table-rspace:0;”

    To the aligned

    tags and that fixed it.. no need to do all the rest. I did a test and it looks fine on Outlook 07/10/13.

26. Thank you SO much! This was making me crazy. I didn’t put the first

    content in a

    tag. I just added the mso-table-lspace:0;mso-table-rspace:0; styles to the

    tag and it worked for me! It worked for all email clients.

27. @Mary,
    Glad to know it helped. Perhaps you should consider switching services? We are happy to help you with client quirks like this. 🙂

28. I have an issue with aligning tables in MS Outlook, where the tables fall under each other when they require the full width of the container.

    Is there a way of fixing this without using conditional comments? Thought it’s related but couldn’t work out the fix.

29. aj2012’s tip about putting a height value on the TR containing the two tables worked for me! It’s strange though because my content wasn’t that long… I only had to put TR=275, not 2000!

30. Thank you for posting this, I was having this very problem on Outlook 2007 and never thought I would get it figured out! I appreciate your helpfulness!

31. I have no idea what i’m doing wrong? I “used” cellspacing (3px) to get a nice border in the menu like sans-online.nl. But because I use two tables, the spaces doubles to 6px. I can’t get it right. Does anyone have an idea?

32. Hi all,
    Does anyone having an idea about why paragraph text overlapping horizontally
    in ie9 gmail and ie9 yahoo

33. Why would anyone want to put three (or n) tables horizontally when everything is achievable using three td cells instead, without all the bother of this hack? Widths and floats for mobiles are fully controllable with css, even in emails.

34. 3 tables side by side is for a fluid responsive layout. It can go from a 3 column layout to a 2 column to a 1. Or however many you choose.

    This is the table i used. Just tested and seemed to work well. No need for that extra junk. Only the table needs the fix.

    It’s a 3 product row.

35. I had a responsive two-column email template to build so I used the same HTML layout as in this post. But since both columns were extremely long for an email IMO (email totaled to some 3000px height), the layout broke as soon as one of the columns was longer than some 1400px even when using the solution in this post.

    I also tried all the 23.7 inches solutions:
    https://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010

    In the end after nearly losing my mind and tempted to drink myself to death, I tried the mso conditional statements to make avoid having two tables next to each other, and have them in two separate cells instead. I almost cried when I saw it all working. Here’s the html:

    <!– Start left-column content –>

    LEFT COLUMN CONTENT <!– End left-column content –> <!–[if gte mso 9]>

    RIGHT COLUMN CONTENT

    <!– End right-column content –>

36. Thank you for this excellent set of posts and conversation! I was having awful times with small things in Outlook(s) and the Word based rendering.

    I wanted to pass on a few notes and ideas:
    1) one thing that we saw is that Lotus Notes versions 6,7,and 8s all render like word as well, so fixes you do for word help in Lotus Notes.

    2) do a test to see how these show differently
    <!–[if !mso]>This is older MSOffice
    This is newer MSOffice tag, which means you can target it specifically and fix things for outlook.com rendering too.

37. Does mso-table-lspace:0;mso-table-rspace:0 need to be in a

    or can it be in the

    ?

38. Thank you Vedran!!! I too nearly lost the will to live after trying all of the options I could find on the internet and on this page – finally, yours was the one that prevented me from jumping off a building, and it was so simple.

39. Outlook/PC is killing me, I have responsive site thats working-where have perfect media queries (in the head)that work across MAC and mobile devices, but tested through PC/Outlook and my inline header images are a no-show not even my default width.

40. Vedran, you are a beautiful, wonderful person and I wish you every happiness in life.

    “I almost cried when I saw it all working.”

    My heart skipped a beat, I almost couldn’t believe it was so easy. What an elegant solution!

41. Hi Guys this is working fine to me:

    css:
    table[class=Table300] {width:300px !important; height:auto !important;}
    table[class=Table300] img {width:300px !important; height:auto !important;}

    td[class=float300] {width: 300px!important; float: left !important; display: block !important;}

    table:

42. So what could be the issue when one email servicer (iContact) sends the message perfectly to Outlook and other email renderers, but another (StreamSend) results in broken rows?

    I’ve tried all the possible fixes shown here, and the StreamSend service still results in broken tables. Is it possible that the servicer is adding and/or stripping my code?

    Email in question:
    http://catalystav.com/Portals/70/Mktg/emails/2014-template/cav-rd2.html

    Love to hear feedback on this!

43. hi guys
    ive followed the suggestions listed here by i am still not having any luck 🙁

    my code is as follows:

    help me please before i poke my eyes out. 🙂

44. Angie,
    Yes, ESP’s often modify code before sending it out. To see what’s happened, send the code to your account’s auto-process address in the 2 different ways you described. Then take a look at the “code analysis” in the test results. You’ll be able to see what they’re doing to your HTML.

45. It doesnt works at all in Outlook 2013.
    I am so frustrated with this shit 🙁 .

46. Thanks so much, how did you figure out this workaround?

    What does mso mean?

47. “mso” refers to Microsoft. It is a Microsoft proprietary CSS attribute used to prevent extra space that is added by Microsoft email clients.

    You need to use it a certain way for it to work, though. If you are having vertical line space problems, add it to your table as a row all its own, like so:

    It is important to add the line-height AFTER mso-line-height-rule:exactly; in order for it to work.

    You’ll get more consistent results using this method rather than using

    or styling a

    around your copy to add spacing between paragraphs or copy and images or between one table and the next.

48. I don’t normally comment on these things, but I must say thank you. This fix worked like a charm.

49. Someone commented above that this fix does not work in Outlook 2013. I just want to comment that the fix described in step 3 works for me in Outlook 2013 to remove 3px gaps around side-by-side tables.

    I also want to mention that I only needed to perform step 3 #4 for the fix to work (the wrapping element with mso-table-lspace & mso-table-rspace). The additional steps, such as adding a border, were not required.

    Additionally, the wrapping element doesn’t have to be a paragraph tag. In my case a div worked fine, which is probably preferable since a div doesn’t have top or bottom margins like a paragraph does.

50. If the glitch has been known about for so long why don’t providers like MChimp offer a template with more than one table in the body? All their drag and drop templates seem to use a single table. Overall MC is great for novices to start to learn esp using the drag/drop templates, but glitches like this means I’m faced with a significant learning curve coding my own email, meaning sharing/teamworking is limited.

51. @MikeBusyBusyBusyBoy – I may have misunderstood the context… But assuming you’re talking about 2+ column emails, that’s because not all clients will treat HTML code the same way. Just because a fix works great in Outlook 2013 doesn’t necessarily mean it’ll render the same way in other clients. Needless to say, us email coders have it rough.

    Here’s what I do which works almost perfectly if I have a 2-column layout.

    1. Create a Container Table

    2. Create a Content Table with 2 columns

    3. In each column, assign a class, and in the @media query, make that class float left at 100% width (or any width)

    4. Set border and margin to 0px !important in your CSS.

    5. Set all table and TD tags in your CSS like this:
    table, td {
    border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt !important;
    }

    I’ve tried several boilerplates…unfortunately, some clients still do not respect certain CSS definitions.

52. Does the download guide work I get this link when mousing over it. https://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010# It just take me back to the same page.

53. Hi Doug! All you have to do is click on the download button and and opt-in form will pop up. Once you enter your email address, you will then get a confirmation email to verify your address. Immediately after, you will receive an email giving you access to the full guide. Be sure and contact us again if you run into any issues!

54. Awesome! Just what I wanted.

55. Thank you for the guide it has helped with a few issues but I still have an issue with Outlook 2010/13 and sending tables to outlook.com/office365/mobile. It seams when Outlook 2010 sends an email with a table Outlook will wrap each cell content in a paragraph. Well outlook.com and others will give a bottom margin to all paragraphs, showing a space between cells. Does anyone know of a way to trick to prevent outlook from adding the paragraphs or a way to format the tables to prevent the spacing? Thank you!

56. Thank you for your Great Post.

57. also, you can wrap troublesome images in a p tag with margin and padding set to 0px. Because outlook uses word as it’s rendering engine, Outlook will insert a ton of extraneous tags in you message, one of which might be a p tag surrounding an image with margin. setting your own makes outlook happy, and it is less likely to override your own set tag.

58. Hello, I am having much difficulty with a newsletter I am trying to build. I want to have 5 horizontal columns that switch vertically on mobile (calendar days). The problem on outlook is that it pushes the fifth table on the right to the next row due to the added table border. I have tried and researched through so many forums. Any ideas on how to fix this? I have each table set to 20%.

    MONDAY event TUESDAY event WEDNESDAY event THURSDAY event FRIDAY event

59. GA Communication Group,
    Have you tried setting the tables to 19% width instead of 20%?

60. So I am trying to reference this post for the piece on aligned tables, but it says it’s been consolidated in a whitepaper which i downloaded. But when you get to the part in the whitepaper about what this post used to contain, it just says “The fix is a little more involved. Click here for more on that.” which just brings me back to this post saying it’s been consolidated in this whitepaper I should download. I’m stuck in an infinite loop! Is there still a way to access the fix for tables with align=left? Thanks!

61. Hey there @delloque,

    Our apologies. Where we were trying to direct you to was chapter three of the whitepaper that you have downloaded. This was a re-direct issue on our end and we’ll be sure and make this fix for those who download this moving forward. Please jump down a chapter and hopefully that coding fix will work for you! Please let me know if you have any other questions!

Comments are closed.