Border Collapse differences in FF and Webkit

What you're seeing is the difference in how Firefox and Chrome treat border-collapse. While both browsers render the desired result correctly, their methodology for calculating it differs slightly.

Firefox reads it thusly:

• the <table> itself has border-top- 1px and border-left- 1px
• each contained <td> has border-right- 1px and border-bottom- 1px

Chrome reads each <td> as having its own border all the way around.

In essence, when it sees border-collapse, Firefox revises the properties of each cell in order to remove borders - whereas Chrome keeps the values and just overlaps each border. The effect is the same, just different values at the <td> level. In both browsers, a <td>'s border will lay on top of the<td> preceding it (either above or to the left). Firefox adds a 1px border to the bottom of the cell above (for border-top) and 1px to the right of the cell to the left (for border-right) or to the table if there is no cell to the top or left.

Whilst this may not be noticle for tables rendered only at page load, for dynamically changing tables like hiding / showing a row which has a border this is noticable because it changes the height of the cell above or the width of the cell to the left by -1px (due to the way td heights and widths are calculated) and therefore causes noticable resizing from the original.

There should be a standard way of calculating these, and unfortunately for dynamic tables, the firefox method doesn't really work. It renders the border-collapse option useless.

To overcome these, remove border-collapse and add border-spacing: 0.