Applying borders to a single table cell when using border-collapse

Question

I have a table with the following CSS rules applied:

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

I want certain cells to have a red border, instead.

td.special { border: 2px solid Red; }

This doesn't work as I'd expect. In FireFox 3 and IE8 it looks like this:

_{(source: control-v.net)}

In IE7 Compatibility mode (Running in IE8) it looks like this:

_{(source: control-v.net)}

I want all four sides of the <td> to be red. How can I do this? A test case can be found here.

Answer 1

There's another post on the site I read a while ago that gracefully solves this problem, but I couldn't find it. Anyway, the approach was to make the border-style double instead of solid. This works because double has a higher priority than solid. On 1px or 2px borders, the gap between the double lines doesn't appear because the lines overlap.

table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }

<table>
    <tr><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td class="special">a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td></tr>
</table>

Answer 2

Won't be possible using border-collapse. You could work around the problem somewhat though, for example by doing this:

<td class="special"><div>Two</div></td>

Then applying a style like this:

.special div {
    border: 2px solid #f00;
    margin: -2px;
}

What (hopefully) will happen is the div inside the td will expand outward by 2 pixels and cover the black border with a red border.