Differences in Collapse Collapse in FF and Webkit

Question

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 calculated style for my table cells looks like this: FF:

padding-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?

Answer 1

Derrylwc, this is not entirely 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 in the top or left cell.

, noticle , , , / , , , -1px (- , td) .

, , , firefox . .

, - : 0.

Answer 2

, , - , Firefox Chrome border-collapse. , .

Firefox :

• <table> border-top-width: 1px border-left-width: 1px
• <td> border-right-width: 1px border-bottom-width: 1px

Chrome <td> .

, border-collapse, Firefox , , Chrome . , <td>. <td> <td> ( ).