Vertical border of <thead> in different color than rest of <table> border - bleeds into horizontal border below - Firefox colspan issue

Question

I have a <table> where I want the vertical borders in the <thead> / <th> to be of a different color than the rest of the borders (all borders are 1 pixel wide, no border on top of table). This may seem easy - problem is that in both Firefox, Safari and Chrome, these vertical borders "bleed" into the horizontal border below, which doesn't look very nice. In Firefox it looks OK if the row below the <thead> contains the same amount of columns/cells as the <thead>, but if I use <colspan> I get the "bleed".

The obvious solution would be to use for example "solid" on the vertical <th> borders and "double" on the horizonal <td> borders below - and this does indeed work in Safari and Chrome. However, I've yet to come up with a solution for Firefox, and I think I've tried everything. I can't remove border collapse as that's needed for other purposes. (Yes, by default it looks like I want in IE8 and Opera!)

View example: http://jsfiddle.net/7YdCQ/

Code (a very simple example with strong colors) - CSS (all borders solid):

table { border-collapse: collapse; }
thead th { border-left: 1px solid #F00; border-right: 1px solid #F00; }
tbody th, td { border: 1px solid #0F0; }

HTML (2 tables, 1 with colspan):

<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>

Answer 1

The solution is to override CSS styles properly. Tested with colspan in <th> of both <thead> and <tbody> tags. Edited example: http://jsfiddle.net/7YdCQ/21/

CSS

table { border-collapse: collapse; }
tbody th, tbody td { border: 1px solid #0F0; }
thead td, thead th, tbody th { border-left: 1px solid #F00; border-right: 1px solid #F00; }

HTML

<table>
    <thead>
        <tr>
            <th>Thead TH 1</th>
            <td colspan='2'>Thead TD colspan 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan='3'>Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<br>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>