Why is Firefox missing the border on some HTML tables

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 sens

Answer 1

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 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 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 4

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.

Answer 5

Just use border-spacing:0; hope this will solve your problem.

Answer 6

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.