Disappearing CSS table cell borders in Gecko-based browsers

Question

I have a very specific html table construct that seems to reveal a Gecko bug.

Here's a distilled version of the problem. Observe the following table in a gecko-based browser (FF, for example): (you'll have to copy and paste this into a new file)

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

There's a line missing over the "3" in the bottom-right cell -- view it in any other browser and the line will appear as expected. Interestingly, ditch the thead section of the table and look what we get:

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Doing that makes it work. Has anyone seen this? I suppose I'll just get rid of my thead section for now as a workaround though it makes the table rather less accessible.

Answer 1

Strange... definitely a painting bug. If you right-click to get the context menu to appear over part of where the line should be, then when you dismiss the context menu, the line has been redrawn underneath.

Edit: Workaround - if you put style="border-color: ...;" on the <td rowspan="3"> you can get the border to appear, but it has to be a different colour - just use one that's as close to the others as possible. For example, if the table is #ff0000 use #ff0001