Aaron Aaron - 2 months ago 16
CSS Question

Disappearing CSS table cell borders in Gecko-based browsers

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

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

Comments