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.
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