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

Asked 22/9, 2011 at 15:12 Answered 8/12, 2021 at 8:31

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?

Circumstantial answered 22/9, 2011 at 15:12 Comment(3)

Don't ask me why, but when i moved the border-collapse property from the div.datagrid table into the table.data itself in the CSS above, it worked alright. Maybe there's someone else here who can explain... (i'm on Firefox 5) – Tachygraphy 22/9, 2011 at 16:31

I don't have an answer to your question. I suspect this is a bug, as relative positioning should not affect borders, but I made a simplified test case and all 4 browsers displayed it differently! (Fx6, Op 11.50, IE8, Chrome 15) Test case here: jsfiddle.net/76Qb7/9 – Trajectory 22/9, 2011 at 18:14

Just ran into this issue … funny that a firefox bug persists over such a timespan. – Aleciaaleck 16/7, 2019 at 10:16

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

Uncial answered 22/9, 2011 at 18:50 Comment(5)

I ran in the same issue. It is still not fixed by Firefox. Seems they don't take it seriously enough while it is a big design issue when using the :nth-child(odd) selector as well to add a background to only the odd rows. I need the border as well to make it perfect. Thansk for filing the bug! – Nightshirt 8/11, 2012 at 22:47

FYI, still current 9 years later. – Partlet 29/6, 2020 at 6:54

FYIA, still current 11 years later. – Noncompliance 5/4, 2022 at 19:30

FYI, still occurring after 12 years later. – Syndic 5/2, 2023 at 12:49

Still happening in June, 2023 ( 12 year after ) – Mintamintage 26/6, 2023 at 12:59

219

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

Hemimorphic answered 2/5, 2013 at 11:42 Comment(3)

Huh, I don't get it. The docs say it specifies whether the background extends underneath the border. I get the impression it's rendered on top of the border. – Circumstantial 3/5, 2013 at 14:10

Best CSS only solution i've found. Thanks for sharing @Hemimorphic – Warrin 16/7, 2014 at 17:23

This is far from the solution. There is a gap between the border and the box. That makes the border color highlighted and little shadow effect. We don't want that. – Paregoric 15/4, 2022 at 4:33

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

Uncial answered 22/9, 2011 at 18:50 Comment(5)

FYI, still current 9 years later. – Partlet 29/6, 2020 at 6:54

FYIA, still current 11 years later. – Noncompliance 5/4, 2022 at 19:30

FYI, still occurring after 12 years later. – Syndic 5/2, 2023 at 12:49

Still happening in June, 2023 ( 12 year after ) – Mintamintage 26/6, 2023 at 12:59

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>

Bounden answered 27/9, 2013 at 9:23 Comment(2)

This works to fix the bug in FF but in IE there is an ugly white border inside the regular border how do we fix that? – Lamarckian 23/10, 2014 at 16:34

Thanks you so much. Your code helped me a lot time – Incoercible 5/9, 2023 at 3:47

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;
}

Dermatology answered 15/9, 2013 at 3:49 Comment(1)

If you use pseudo-elements like ::before or ::after on the same td, position: static messes these stylings up. background-clip: padding-box is safer. – Coming 24/6, 2015 at 16:34

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

Garget answered 13/7, 2016 at 12:17 Comment(2)

Removing border-collapse: collapse from table element helped us – Almandine 29/9, 2016 at 7:19

Other syntax errors apparently trigger this too. Considering @pekaaw's advice, I proofread my HTML and found that I had <thead> where I meant to have </thead>. Fixing that typo fixed the border problem! – Cammi 19/9, 2019 at 15:41

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;
        }
      }
    }
  }
}

Loach answered 12/2, 2020 at 13:55 Comment(0)

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>

Corneous answered 4/5, 2020 at 10:51 Comment(0)

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.

Scyros answered 3/12, 2021 at 9:44 Comment(0)

The table body should not have "position":"relative".

Clow answered 8/12, 2021 at 8:31 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags