Firefox 1 pixel bug with border-collapse, workaround?

Question

For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome.

table { border-spacing: 0; *border-collapse: collapse; } 

This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).

If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.

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>

This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

We can also get clean one-pixel borders to work without relying on a working implementation of border-collapse, like this:

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

You see what it's doing? The trick is that we put only a top and left border on the cells:

 +------+------
 | cell | cell
 +------+------
 | cell | cell

This leaves the table without a right and bottom edge: we style those onto table

+------+-------               |         +-------+------+ 
| cell | cell                 |         | cell  | cell |
+------+-------   +           |    =    +-------+------+
| cell | cell                 |         | cell  | cell |
|      |             ---------+         +-------+------+

The border-spacing: 0 is essential otherwise these lines will not connect.

Best CSS only solution:

Add

td {
    background-clip: padding-box
}

More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Thanks to @medoingthings

table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */

table { border-spacing: 0; *border-collapse: collapse; }

wasn't working for me in FF 31. Since i've different colors for thead and tbody cells the table background-color trick wasn't working, too. The only solution was the following:

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}

I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:

table { border: 1px solid transparent; border-collapse: collapse; }

This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.