Saturday, March 10, 2007

The IE border-spacing workaround

Everyone knows these two HTML table tag attributes: cellpadding and cellspacing. And everyone hates the annoying necessity of these attributes in the CSS era. Well, developers, who has looked after what's up now about this issue, have learned that fortunately the cellpadding attribute is safely substitutable with the padding value of the table cells.

But what about cellspacing?

Cellspacing can also be omitted if you work with the border-collapsing model, because IE supports this model in CSS. (Or maybe not; we'll come back to this later.) Anyway, just put border-collapse: collapse in your table's style, and all the space between your table cells will be gone, and the adjacent borders will collapse to one simple border.

(For those of you who didn't fully get the picture, here is a nice illustration of the two border models.)

Problems will arise when you want to use the separated borders model. In this mode the CSS engine (browser) is expected to apply the td border styles separatedly to every single table cell, just as these were simple divs. We can think of this as the normal behaviour, and the collapsing model as a special case, if only because that the former is the initial (default) value in the CSS specs. When you're in the 'separate' model, you can control the space between your table cells with the border-spacing value of the table. You can set the horizontal and the vertical spacing.

But the problem is that IE doesn't support the CSS border-spacing attribute. Instead it puts a fixed 2px space between the cells. This is the point, where normally a developer gives up, becomes a bit melancholy, and puts back the cellspacing attribute into the HTML code. The conclusion: cellspacing can't be controlled by CSS (cross-browser).

Some good news

However, there is some consolation: generally you don't need that. Usually we only need to eliminate that bad looking space between the cells, and this can be achieved by CSS, even in IE. And the good news is that not only in the 'collapse' model but even in the separated!

Say, we want a table, in which all table rows have a red 1px bottom border, and a pink 1px top border (we want it to look a bit like buttons). 'Collapse' model is not an option now. This is a situation, where we have to use the 'separate' model with 0-width border-spacing between the cells.

For this the standard CSS code is as follows:
table {
border-collapse: separate;

td {
border-top: 1px solid red;
border-bottom: 1px solid pink;

It works in the standard compliant browsers, but what about IE?

That's a Feature, Not a Bug

Thankfully, IE is so buggy, that one bug helps to fix an other. So, what to do if I want to achieve a zero-spacing separating model? Exploit the bugs in the collapsing model! IE's border collapsing works fine, but magically gets switched off, if you give a 'position: relative' style to the table cells. If you do this, the browser jumps back to the separated model, width 0 cellspacing! Thx, Mr. Bug.
table {
border-collapse: separate;
border-spacing: 0;
*border-collapse: collapse; /* hack is needed for IE7 also */

td {
border-top: 1px solid red;
border-bottom: 1px solid pink;
*position: relative;

This way, you don't need any of those ugly HTML tag attributes, while working in either a collapsed, or a 0-cellspacing separated borders model. Have fun!


knakts noted in his comment that this workaround provides solution only to those cases in which the border-spacing value is zero. And I felt sympathy for him/her. Thus, as a matter of urgency, I researched another workaround, which brings us closer to the heaven.

Here it is:
table {
border-collapse: separate;
border-spacing: 5px;
*border-collapse: expression('separate', cellSpacing = '5px');

Still not perfect, because you can't differentiate vertical and horizontal spacing, but, as I said, one small step to the happiness.

knakts, don't be melancholic!

UPDATE 2 on 2009.05.05.

Check out this. An article about how to make it really behave like a one-time-running configuration, instead of the usual CSS expression behaviour with the well-known huge performance hit.


  1. OK -- this is a great post on an obscure topic -- thanks for the info!

  2. Thanks a lot, this is great hack :-)

  3. 1)Should I use both collapse and separate for class.table?
    2)Is that "*" necessary in both
    *border-collapse: collapse;
    *position: relative; ?


  4. Hi David,

    1. Yes, you should. Standard browsers will ignore the rules with an "*" before them.
    2. Yes, it's a necessary workaround for those rules which are not supported in either IE6 and IE7.

  5. Interesting article. Unfortunately it is not solution for border-spacing other than zero. Now let me get a bit melancholy and put back up the cellspacing...

  6. Thanks, the "expression" method worked. :)

  7. I've been looking for days for a way to get more spacing between cells to simulate border-spacing in IE. This is the best solution I've found. Thanks very much!

  8. Excellent solution!

  9. It is really helpful, thanks

  10. Wow! Two days trying to figure out a solution to the border-spacing issue and all it needed was one line. This worked for me to make the spaces between cells look the same in IE, Opera, and Firefox.

    table {
    border-collapse: separate;
    *border-collapse: expression('separate', cellSpacing = '1px');
    border-spacing: 1px

    So simple.

    When you know how. ;-)

    Thank you so very much.

  11. Just what I was looking for! Thanks, Martin

  12. I tried this solution and it didn't work. IE only said something about blocking active content, asked me if I wanted to allow some ActiveX thing, and when I said 'Yes' nothing happened. Still the default 2px separation.

  13. @León, this is because JS is disabled on local machine by default in IE. You can test it with any script written in the HTML file. I bet you were working with a local file. CSS expressions are JS.

    After allowing that activeX thing refresh the page, then it'll work.

    You will not experience such problems if you work with remote files.

  14. This post provided a very easy solution to a frustrating problem. Thank you for the info.

  15. Fantastic workaround!!

  16. Unfortunately, this work arround leaves you with a css not validated by the W3C CSS Validator.

  17. If it's so important to you, I'll post a workaround how to make your workaroundish css validated by the w3c validator.

  18. I used this, which validates fine. Hope it's useful to someone!

    < link rel='stylesheet' type='text/css' href='/css/basic.css' />
    < !--[if lte IE 7]>< link rel='stylesheet' type='text/css' href='/css/basic_ie_workarounds.css' />< ![endif]-->

    table { border-collapse:separate; border-spacing:0; }
    /* ... etc ... */

    table { border-collapse:expression('separate',cellSpacing=0); }

    There's more CSS reset (browser unification) stuff in basic.css, and more IE workarounds (body->* font inheritance workaround, other) in basic_ie_workarounds.css too.

    Now I just need a working, validating, cross-browser block-level anchor element! :-) (Hint: this is impossible.)

  19. In the above comment, there's a space between < and the following character, since this stupid blogging software thinks I want to inject HTML into the comment. So replace "< " with "<" before running the code.

    Also, if anyone is wondering whether 'separate',cellSpacing=0 really returns 'separate' and not 0, this little test reveals that both statements are run and the result of the first one is returned. Paste it in the browsers' URL line.

    Return value test:

    Run both test:

  20. and what if your CSS is "border-spacing: 2px 5px;"?
    In the IE-fix you can give only one number for cellspacing...

  21. You haven't read the entire post. As for that, and AFAIK, different vertical and horizontal cellspacing is unaccomplishable in IE, either by HTML or CSS or other ways.

  22. think i found a way to fix and diferentiate the vertical and horizontal spacing in IE.. :.

    just give the td a class, position it relative and move it left by -6px; it's kinda weird, but worked for what i needed to do... maybe u can use also td+td .
    A lot of hacks for one css though. I think i will use divs...

    table tr td.second {

  23. thanks!!
    PS u can also use - it's shorter ;)

    table.css_class {
    border-spacing: 1px;
    *border-collapse: expression('separate', cellSpacing = '1px');

  24. Perfect, a million thanks.

  25. Thanks, appreciate this.

  26. You are a friggin' genius! T H A N K - Y O U !

  27. Not the perfect fix, but well worth mentioning in my blog about dynamic table creation.

  28. One and a half year later, still a very useful exploit. Thanks for sharing!

  29. Anyone tested this on IE8? Anyway, big thanks, saves me the time I don't have to figure this one out.

  30. IE8 fully supports CSS 2.1, so this is not an issue anymore.

  31. I am having an issue with Firefox that I can't seem to find a hack for. Check out the Main vertical menu for in Firefox and then in any other browser. It's working the way that I want it to in all browsers except firefox.
    The html looks like this:
    table border="0" cellspacing="2" cellpadding="0"

    and the images are a sprite. Firefox allows some of the background image to show through the 2px cellspacing...and I don't want that.

  32. This is really worked..but have another problem if anyone knows abt it. As per css if we use border-collapse: collapse; it will ignore empty-cells: show. how to achieve that? I mean for IE I am using the star hack provided here (*border-collapse: collapse;, *position:relative and empty-cells: show;) where as empty-cells is getting ignored because of *border-collapse: collapse;. I need both the properties any workaround?

  33. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

  34. Nice information, I really appreciate the way you presented.Thanks for sharing..

  35. Thanks a lot - I was pulling my hair out with the border-spacing in IE6 and IE7 - the expression hack works in both of those browsers - I line of css - NICE FIX THANKS FOR SHARING!

    ~ Jim

  36. This is exactly what I was looking for, thanks!

  37. Excellent post. Just helped me too. Trying to make my ap the same in as many different browsers as possible even older ones like ie6 and have menu that looked fine in all but ie6/7. 3d effect with light border one side dark on other needed border-collapse:sererate but couldn't get the spacing on older ie's down to 0 till now. Have bookmarked your blog and will have a better look through soon to see what other handy snippets are there

    Andrew Blake

  38. Thank you for sharing you provided me with a quick solution to the problem!!! Cheers x

  39. Sweet, the expression worked for IE7

  40. Your blog is really helps for my search and i really like it.. Thanks a lot..:)
    Term Papers Writing Services

  41. Thank you, the expression is fantastic for IE!

  42. Awesome dude, how did you even discover this hack, hats off!!

  43. Thanks for this great hint!

    Only drawback is, IE only understands px-values. em-values are not interpreted at all :-/

  44. Thank you!! great quick solution for a obscure problem!!

  45. Thank you for the auspicious writeup. It in reality was a leisure account it.
    Glance complicated to more added agreeable
    from you! By the way, how can we keep in touch?
    Visit my blog post - free long porn video

  46. At this time I am going away to do my breakfast, after having my breakfast coming over
    again to read additional news.
    My weblog :: nude teens

  47. This is the perfect site for anybody who hopes to find out
    about this topic. You know a whole lot its almost hard to argue with you (not that I really would want to…HaHa).
    You definitely put a brand new spin on a subject which has been written about for a long time.

    Great stuff, just great!
    Also see my web page: free teen porn

  48. I do not even know how I ended up here, but I thought this post was
    great. I do not know who you are but definitely you're going to a famous blogger if you aren't already ;) Cheers!
    Take a look at my homepage ... Sexy blonde shows off her tits

  49. Good day! I could have sworn I've been to this blog before but after looking at some of the articles I realized it's new to me.
    Anyways, I'm certainly happy I discovered it and I'll be book-marking it and checking back regularly!
    Also see my web page > teen porn

  50. thanks. this is very useful and it fixed the same problem on IE 9 for me.

  51. Very nice article, just what I wanted to find.

    Here is my website; d'nest

  52. Hi there! Do you know if they make any plugins to protect against hackers?
    I'm kinda paranoid about losing everything I've worked hard on.
    Any tips?

    Look at my weblog ... michael kors history

  53. I'm not sure where you're getting your information, but great topic.
    I needs to spend some time learning much more or understanding more.

    Thanks for fantastic info I was looking for this information for my mission.

    Feel free to surf to my web blog レイバン激安

  54. My partner and I stumbled over here coming from a different
    page and thought I might as well check things out. I like what I see so now i'm following you. Look forward to finding out about your web page yet again.

    Also visit my page; レイバンサングラス

  55. Hmm is anyone else experiencing problems with the images on this blog loading?
    I'm trying to figure out if its a problem on my end or if it's the blog.
    Any responses would be greatly appreciated.

    Visit my web page; ロレックススーパーコピー

  56. Helpful info. Lucky me I discovered your site unintentionally, and I'm stunned why this accident did not took place earlier! I bookmarked it.

    Feel free to visit my weblog - ロレックスレプリカ

  57. When I originally commented I clicked the "Notify me when new comments are added" checkbox
    and now each time a comment is added I get three emails with
    the same comment. Is there any way you can remove me from that service?
    Thank you!

    Feel free to surf to my site -

  58. Right away I am ready to do my breakfast, when having my breakfast coming over again to read other news.

    my site: ロレックスレプリカ

  59. Hello There. I discovered your weblog the usage of msn.
    This is an extremely well written article.
    I will be sure to bookmark it and come back to read extra of your helpful information.

    Thanks for the post. I'll certainly return.

    Also visit my homepage;

  60. continuously i used to read smaller posts which also clear their motive, and that
    is also happening with this piece of writing which I
    am reading here.

    Feel free to visit my page プラダ バッグ

  61. Unquestionably imagine that which you said. Your favorite justification seemed to
    be on the web the easiest thing to be mindful of.

    I say to you, I definitely get irked even as people think about issues that they just do not recognize about.
    You managed to hit the nail upon the highest and
    outlined out the entire thing with no need side effect , people can take a signal.
    Will likely be again to get more. Thanks

    Feel free to surf to my blog post;

  62. Link exchange is nothing else except it is simply placing the other person's blog link on your page at suitable place and other person will also do same in support of you.

    Stop by my weblog ::

  63. I am genuinely thankful to the owner of this web page who has shared this enormous piece of writing at at this time.

    my blog;

  64. I'm extremely inspired along with your writing abilities and also with the layout for your blog. Is that this a paid theme or did you customize it yourself? Anyway stay up the excellent quality writing, it's uncommon to
    peer a nice weblog like this one nowadays..

    Also visit my homepage; bmi calculator for adults

  65. In Canada, the type of wait is normally six months.
    Are the sleeves padded as well the way the rest attached to the
    jacket? Visible calf Air-Sole unit contributes the ultimate on cushioning.
    air max shoes have gone to a long avenue since they were
    made in 1987.

  66. 。 "9月号"のドキュメン

    Here is my weblog; グッチ バッグ

  67. 。現在はもっと多くのグッチのスタイルはしかし

    Also visit my web site グッチ 長財布

  68. 。、2011年の早い
    しょう。 。私たちは冬に

    Also visit my web page ::

  69. 。グッチの靴は、

    Here is my webpage ::

  70. あなたはココシャネルの任意の画

    my site - シャネル 財布

  71. Heya! I'm at work surfing around your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the fantastic work!

    my website;

  72. I am sure this post has touched all the internet people, its really really
    pleasant post on building up new blog.

    my homepage; レイバンメガネ

  73. This skeletal change is immediately vision on an X-ray.
    So Watase's fans can't worry as my wife many stories arrive.
    I this is so common and need to know it. Penney is an incredibly affordable mid-range department shop perfect for accessories shopping.

  74. I have been surfing online more than three hours today,
    yet I never found any interesting article like yours.
    It's pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the net will be much more useful than ever before.

    my web site;

  75. It's great that you are getting ideas from this post as well as from our discussion made at this place.

    Feel free to surf to my site: cheap nike air max

  76. Howdy would you mind sharing which blog platform you're working with? I'm planning to
    start my own blog in the near future but I'm having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something completely unique.
    P.S Apologies for being off-topic but I had to ask!

    Feel free to surf to my site ...

  77. Hi there to all, how is all, I think every one is getting more from this web page, and your
    views are good for new visitors.

    Feel free to surf to my web site -

  78. I visited various web sites except the audio quality for audio songs present
    at this web site is genuinely excellent.

    Here is my homepage Http://

  79. It's very effortless to find out any matter on web as compared to books, as I found this piece of writing at this web page.

    Here is my web-site: ナイキエアジョーダン

  80. Really no matter if someone doesn't be aware of afterward its up to other visitors that they will help, so here it occurs.

    My blog buy bulk twitter followers

  81. Really nice Post…..

    AliExpress Portal Official Merchandise Shopping Store Buy Anything You Want Now Shipped By UPS! HotwifeXXX