Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell

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 tbody in the CSS
Changing div.datagrid table tbody to div.datagrid table in the CSS
Removing the background-color on table.data td.priceCell in the CSS
Removing the border-collapse on div.datagrid table in 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?

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>

Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell

Related

Recent Posts