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!

UPDATE

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.