Border-collapse bug in Firefox

You might be surprised if you try to draw another border around a table if border-collapse:collapse is set on the table itself, as Firefox happens to merge the border of the table with that of the element outside it. Here is a simple markup:

<div style="border:1px solid blue;width:20px;">
<table style="border:1px solid red;border-collapse:collapse">
<tr><td>X</td></tr>
</table>
</div>

And the result in FF 3.5 magnified:



The overlap is one pixel only, but it is enough to hide a 1px-wide border. The borders are drawn as expected in other browsers. The solution can be to use border-collapse:separate.

Popular Posts