Firefox 1 Pixel Bug with Border-Collapse, Workaround

Firefox 1 pixel bug with border-collapse, workaround?

Remove the border-collapse and use cellspacing=0 instead.

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.

Set your border widths to 10px in your code to see what is really happening.

---

edit after OP edit

You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

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

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

Work Around for Firefox Table Border Rendering Bug

You have a problem whith border-collapse:

Here is a solution for your problem: http://www.charlesgarwood.com/blog/?p=13

What to do:

• change border-collapse from collapse to separate
• change the border-width of the <td>s and <th>s from 2px to 1px
• give the <table> itself a 1px border

Give some conditional comments like described in the link

Why is Firefox missing the border on some HTML tables

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.

True 1px table border in FireFox?

This works, although causes problem when dynamically hiding table columns in Angular.

table {
    font-size: inherit;
    border-collapse: separate;
    border-spacing: 0;
}

td, th {
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
    min-width: 10px;
    empty-cells: show;
}

table.border td, table.border th {
    border-left: solid 1px #808080;
    border-top: solid 1px #808080;
    border-right: none;
    border-bottom: none;
}

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

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

True 1px table border in FireFox?

This works, although causes problem when dynamically hiding table columns in Angular.

table {
    font-size: inherit;
    border-collapse: separate;
    border-spacing: 0;
}

td, th {
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
    min-width: 10px;
    empty-cells: show;
}

table.border td, table.border th {
    border-left: solid 1px #808080;
    border-top: solid 1px #808080;
    border-right: none;
    border-bottom: none;
}

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

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

---

Related Topics