Border-collapse properties for overlapping cell borders in a CSS table

Syntax: border-collapse:separate | Collapse

Value:
Separate: Default value. Border Independent (standard HTML)
Collapse: Adjacent edges are merged

Description
Sets or retrieves whether the edges of a table's rows and cells are merged or separated by a standard HTML style.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is bordercollapse.

Example:

Table {border-collapse:separate;}

Apply to:
ie5.0+ currentstyle Runtimestyle Style TABLE

Example one: Useless style

The following is a reference fragment:

<table width= "border=" 1 "cellpadding=" 0 "cellspacing=" 0 "bordercolor=" #FF0000 ">   <tr>     < td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td >&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td> &nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr >   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td> &nbsp;</td>     <td>&nbsp;</td>   </tr></table>

Example two: function style

The following is a reference fragment:

<table width= "border=" 1 "cellpadding=" 0 "cellspacing=" 0 "bordercolor=" #FF0000 "style=" Border-collapse: Collapse; " >   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td> &nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>& nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>& nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>& nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr> </table>

Table Width=1 has set the width to 1.
The problem we face is that each TD edge is a 1px,table edge and 1px. So when the two TD next to each other, because each TD edge is 1, so when the edge of the "width and" is 1+1=2. When TD and Table are adjacent, the same.

Collapse: Adjacent edges are merged

Adjacent edges are merged! I used to say that 1+1=2 is the problem between TD and TD, the adjacent side between TD and Table. By default, adjacent edges are not merged, so this is 1+1=2. Now we're using border-collapse:collapse to merge us, so the width is still 1px. That is, a thin border appears.

CellSpacing is set to "0", and the result is that the distance between each cell in the first table is 0. If you set the table border to "0", the cell distance is 0.
The CellPadding property is used to specify the size of the white space between the cell contents and the cell boundaries
。 The parameter value of this property is also a number that represents the pixel count of the height of the white space distance between the cell contents and the upper and lower bounds, and the width of the white space between the cell contents and the left and right boundaries.