Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
CssFirefoxBorderCss Problem Overview
Consider the following HTML:
<html>
<head>
<style>
TABLE.data TD.priceCell
{
background-color: #EEE;
text-align: center;
color: #000;
}
div.datagrid table
{
border-collapse: collapse;
}
div.datagrid table tbody
{
position: relative;
}
</style>
</head>
<body>
<div id="contents" class="datagrid">
<table class="data" id="tableHeader">
<thead>
<tr class="fixed-row">
<th>Product</th>
<th class="HeaderBlueWeekDay">Price</th>
<th class="HeaderBlueWeekDay">Discount</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic;">
<td>Keyboard</td>
<td class="priceCell">20</td>
<td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Notice that the last cell has a left and a right border in its inline style. You (or at least I) would expect this to be visible. In IE, this is the case. But in Firefox (6), this is not. You can solve this by:
- Removing position relative on
div.datagrid table tbodyin the CSS - Changing
div.datagrid table tbodytodiv.datagrid tablein the CSS - Removing the
background-colorontable.data td.priceCellin the CSS - Removing the
border-collapseondiv.datagrid tablein the CSS
This is a simplified version of our code; we also solved it (by choosing option 2). But what I'm wondering about is:
- Is this a bug in Firefox?
- Is this a bug in IE?
And especially: what is the reason Firefox wouldn't show the borders when the CSS is as it is?
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
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.
Solution 3 - Css
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>
Solution 4 - Css
This is a bug in firefox and hopefully they fix it soon. But in the mean time I was able to fix this issue for me by setting my td cells to position: static. Hopefully that will help someone else.
td {
position: static;
}
Solution 5 - Css
Another possible solution is to correct colspan errors in your table markup.
Apparently can colspan errors cause the same effects with hidden borders when using border-collapse: collapse;
I was directed to the right solution through http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html.
In my table I had written <th colspan="9"> when there was only 8 columns.
That caused error (hidden right border) in
- Chrome 51.0.2704.103 m (64-bit)
- Vivaldi 1.2.490.43 () (32-bit)
but rendered with right borders in
- Firefox 44.0.2
- IE 11 (11.420.10586.0)
- Edge 25.10586.0.0
Solution 6 - Css
The best way to solve this issue is to do something like this.
Note the position: relative property in the "thead" and the "tbody' elements, those are important. So are the border-collapse and background-clip properties. Works with background-color on all and alternating rows.
table {
width: 100% !important;
border-spacing: 0;
border-collapse: unset !important;
thead {
position: relative;
left: -1px;
top: -1px;
tr {
th {
background-clip: padding-box;
border-top: 1px solid #737373!important;
border-left: 1px solid #737373!important;
border-right: none !important;
border-bottom: none !important;
&:last-child {
border-right: 1px solid #737373!important;
}
}
}
}
tbody {
position: relative;
left: -1px;
top: -1px;
tr {
&:last-child {
td {
border-bottom: 1px solid #737373!important;
}
}
td {
background-clip: padding-box;
border-top: 1px solid #737373!important;
border-left: 1px solid #737373!important;
border-right: none !important;
border-bottom: none !important;
&:last-child {
border-right: 1px solid #737373!important;
}
}
}
}
}
Solution 7 - Css
Adding another solution for this (old) issue: This happened to me today, because I have a somewhat complicated table with multiple tbody. The only issue was actually that I had an opened tbody tag that was not closed. I deleted that tag and the borders re-appeared, without needing to change anything in my CSS. To clarify, my structure was something like:
<table>
<thead>
<tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
<tbody>
<tr><td>Val1</td><td>Val2</td></tr>
<tr><td>Val3</td><td>Val4</td></tr>
</tbody>
</table>
Solution 8 - Css
For me add border-collapse attribute to separate inside table solved the problem
Like this:
margin-bottom: 0;
color: #333333;
font-family: "Poppins", sans-serif !important;
border-collapse: separate;
Where as in chrome, we don't need to set this attribute and works fine even without mentioning too.
Solution 9 - Css
The table body should not have "position":"relative".