Best IT Recipes

Borders not shown in Firefox with boundary collapse on the table, position: relative by tbody or background color on the 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 right border in its inline style. You (or at least me) would expect this to be seen. In IE, this is so. But in Firefox (6) it is not. You can solve this problem:

  • Removing position relative to div.datagrid table tbody in CSS
  • Changing div.datagrid table tbody to div.datagrid table in CSS
  • Removing background-color on table.data td.priceCell in CSS
  • Removing border-collapse on div.datagrid table in CSS

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

  • Is this a bug in Firefox?
  • Is this a bug in IE?

And especially: what is the reason that Firefox will not show borders when CSS is what it is?

+56
css firefox border
Sep 22 2018-11-18T00:
source share
5 answers

It looks like a Firefox bug for me. Backgrounds are drawn above the borders; You can see this if you use a translucent background color.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=688556

+52
Sep 22 '11 at 18:50
source share

Just ran into this problem and came up with a css 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

+104
May 02, '13 at 11:42
source share

Just to put everything in one place.

The problem occurs when you have a cell with a position relative to a table with collapsed borders (as Boris pointed out and filled out the error https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

This is easily solved using CSS, as specified by user 2342963 (adding a background clip: padding-box to a cell).

You can see the problem (with Firefox) and fix it 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>
+11
Sep 27 '13 at 9:23
source share

This is a bug in firefox, and hopefully they will fix it soon. But at the same time, I was able to fix this problem for me by setting the td cells to position: static . Hope this helps someone else.

 td { position: static; }
+6
Sep 15 '13 at 3:49
source share

Another possible solution is to fix colspan errors in table layout.

Apparently, colspan errors can cause the same effects with hidden borders when using border-collapse: collapse;

I was sent to the correct solution through http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

In my table, I wrote <th colspan = "9"> when there were only 8 columns.

This caused an error (hidden right border) in

  • Chrome 51.0.2704.103 m (64-bit)
  • Vivaldi 1.2.490.43 () (32-bit)

but with the right borders in

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Edge 25.10586.0.0
+2
Jul 13 '16 at 12:17
source share


More articles:


All Articles