Home > Web Front-end > CSS Tutorial > The border-collapse property of overlapping cell borders in CSS tables

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

黄舟
Release: 2017-06-30 09:46:14
Original
4238 people have browsed it

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; }
Copy after login

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>
Copy after login


##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>
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template