CODEWITHSUNDEEP
cssfirefoxborder
Peter
Peter

Reputation: 14118

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:

This is a simplified version of our code; we also solved it (by choosing option 2). But what I'm wondering about is:

And especially: what is the reason Firefox wouldn't show the borders when the CSS is as it is?

Upvotes: 99

Views: 59061

Answers (9)

Muthulakshmi M
Muthulakshmi M

Reputation: 777

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

Upvotes: 0

Ashish Sharma
Ashish Sharma

Reputation: 679

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.

Upvotes: 1

Katz
Katz

Reputation: 175

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>

Upvotes: 1

Mike Dinder
Mike Dinder

Reputation: 109

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

Upvotes: 1

pekaaw
pekaaw

Reputation: 2607

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

Upvotes: 4

Ramiro S&#225;nchez
Ramiro S&#225;nchez

Reputation: 506

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>

Upvotes: 19

smitt04
smitt04

Reputation: 3058

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

Upvotes: 9

medoingthings
medoingthings

Reputation: 3015

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

Upvotes: 219

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

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

Upvotes: 70

Related Questions