Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
Just ran into this issue and came to a css only solution:
just add background-clip: padding-box
to your td
element.
See this article for more information: https://developer.mozilla.org/en-US/docs/CSS/background-clip
This looks like a Firefox bug to me. The backgrounds are painting over the borders; you can see it if you use a translucent background color.
I filed https://bugzilla.mozilla.org/show_bug.cgi?id=688556
Just to put all in one place.
The problem is produced when you have a cell with position relative inside a table with collapsed borders (as Boris indicated and filled in the bug https://bugzilla.mozilla.org/show_bug.cgi?id=688556)
This can be easily solved using CSS as indicated by user2342963 (Adding background-clip: padding-box to the cell).
You can see the problem (with Firefox) and the fix here: http://jsfiddle.net/ramiro_conductiva/XgeAS/
table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}
<table class="tableSeparate">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative cellRelativeFix">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>