Border Collapse differences in FF and Webkit

I have a table with the following rules :

    <table cellspacing="0" cellpadding="0" style="table-layout:fixed;
width:1000px;border-collapse:collapse;border-spacing:0">

and the cells have the following CSS:

td{
padding:4px;
height:22px;
border:1px solid gray;
}

The computed style for my table cells looks like the following in FF:

padding开发者_JAVA技巧-top 4px
padding-right   4px
padding-bottom  4px
padding-left    4px
border-top-width    0
border-right-width  1px
border-bottom-width 1px
border-left-width   0

whereas on webkit, it looks like this:

padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;

For some reason, there is a difference in the following two properties:

border-top-width
border-left-width

Is this a known issue ? Any possible solutions to the problem ??

Derrylwc, thats not exactly correct - the effect is not the same. 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.

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-width: 1px and border-left-width: 1px
• each contained <td> has border-right-width: 1px and border-bottom-width: 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).