Why is Firefox missing the border on some HTML tab

Question

I am using Firefox 3.5.7 and I have the same CSS used in multiple HTML tables, but there are some examples where parts of the borders are not shown.

What makes no sense to me is that the same CSS on the same page for another HTML table works fine. Also, the same page in Internet Explorer looks fine from a border point of view.

Here is an image with an example, as you can see in this case the bottom of the first table is missing a border.

Does anyone have a clue why this would happen here?

Answer 1

Building on the good answer of @GregL (I seem unable to "comment" directly on it): Instead of using JQuery to generate a "last" class, I simply used the built-in pseudo-element selector :first-child. I built rules selecting tr:first-child and td:first-child that define border-top and border-left (instead of border-right and border-bottom as in GregL's answer). The generic rules define border-right and border-bottom instead of border-left and border-top. :first-child is said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, and Opera v. 9.6 (). Tested on Firefox v. 40.0.3, where I saw this problem in the first place.

Answer 2

Maybe you've zoomed in/out a bit. This can happen either accidently or knowingly when you do Ctrl+Scrollwheel. Maybe it isn't completely resetted to zoom level zero. This mis-rendering behaviour is then recognizeable at some websites, also here at SO.

To fix this, just hit Ctrl+0 or do View > Zoom > Reset to reset the zoom level to default.

This is Firefox/Gecko bug 410959. This affects tables with border-collapse:collapse. It's from 2008 and there's no real progress on it, so you'll probably need to find a workaround. One way is using border-collapse:separate and fiddling with borders on a per-cell basis.

Answer 3

I had the same problem with missing table border. My solution is:

table{
  border-collapse: collapse !important;
  border-spacing: 0px;
  border: 1px solid #DDD;
}

And border for table rows:

table tr{
  border-bottom: 1px solid #DDD !important;
}

I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered"

This solution works for me, when I tried solution with

border-collapse: separate !important;

it didn't work properly for me.

Answer 4

I found a similar problem when zoomed out in Firefox on an application I am working on.

The main cause was having the CSS border-collapse property set to collapse.

Changing it to separate instead fixed the problem. However, that meant I did have to rethink the way borders are applied to various parts of the table, because otherwise your borders will appear to double in thickness. I ended up having to use jQuery to give a special "last" class to the last td or th in each tr, and to the last tr in the table. My query was something like:

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');

My CSS rules were similar that:

table
{
    border-collapse: separate !important;
}

table tr, table th, table td
{
    border-right-width: 0;
    border-bottom-width: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

table td.last, table th.last 
{
    border-right: 1px solid black;
}

table tr.last td
{
    border-bottom: 1px solid black;
}

table
{
    border: 0;
}

I did end up using browser targeting so that I only applied these rules to Firefox users, but it may work for all browsers, I haven't tested.

Answer 5

worked for me realisation of answer @Donald Payne

*( .table - bootstrap class )

table.table {
    border-collapse: separate !important;
}

table.table tr,
table.table th,
table.table td {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid #DDD !important;
    border-top: 1px solid #DDD !important;
}

table.table td:last-child,
table.table th:last-child {
    border-right: 1px solid #DDD !important;
}

table.table tr:last-child td {
    border-bottom: 1px solid #DDD !important;
}

table.table {
    border: 0 !important;
}

table.table thead tr:last-child th,
table.table thead tr:last-child td {
  border-bottom: 1px solid #DDD !important;
}

table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
  border-top-width: 0 !important;
}

Answer 6

This was caused by the table (with a missing bottom-border) to be inside a div...The border apparently didn't get calculated in the table height, so the border was there but wasn't shown.

Giving the surrounding div a margin-bottom from 1px solved the problem.