The border-collapse property of overlapping cell borders in CSS tables

Syntax: border-collapse: separate | collapse

Value:
separate: Default value. Border independent (standard HTML)
collapse: Adjacent edges are merged

Description:
Set or retrieve the row and cell edges of the table Whether to merge together or separate according to standard HTML style.
This property is read-only for currentStyle objects. For other objects can be read and written.
The corresponding script feature is borderCollapse.

Example:

table { border-collapse: separate; }

Applies to:
IE5.0+ currentStyle runtimeStyle style TABLE

Example 1: Unused style

The following is a quote fragment:

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

##Example 2: Action style

The following is a quotation fragment:

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

table width=1 has already set the width to 1The problem we face is this , each td side line is 1px, and the table side line is also 1px. Then when two tds are adjacent, because each td side line is 1, the "sum of width" of the side lines when they move in is 1+1=2. Same thing when td and table are adjacent.

collapse : Adjacent edges are merged

Adjacent edges are merged! What I said before is 1+1=2 because of the problem of adjacent edges between td and td, and between td and table. By default, adjacent edges are not merged, so 1+1=2. Now we use border-collapse:collapse to merge them, so the width is still 1px. That is, a thin border appears.

cellspacing is set to "0", and the displayed result is that the distance between each cell of the first table is 0. If the table border is set to "0", the distance between the cells is 0
The cellpadding attribute is used to specify the size of the blank distance between the cell content and the cell boundary
. The parameter value of this property is also a number, which represents the number of pixels occupied by the height of the blank distance between the cell content and the upper and lower borders and the number of pixels occupied by the width of the blank distance between the cell content and the left and right borders.

The above is the detailed content of The border-collapse property of overlapping cell borders in CSS tables. For more information, please follow other related articles on the PHP Chinese website!