CSS 테이블에서 겹치는 셀 테두리의 border-collapse 속성

구문: ​​border-collapse: 분리 | 붕괴

값:
separate: 기본값. 테두리 독립적(표준 HTML)
collapse: 인접한 가장자리가 병합됩니다.

설명:
행과 셀 가장자리가 표준 HTML 스타일 에 따라 함께 병합되거나 분리되는지 여부를 테이블 설정 또는 검색합니다.
이 속성은 currentStyle 개체에 대한 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 borderCollapse입니다.

예:

table { border-collapse: separate; }

적용 대상:
IE5.0+ currentStyle 런타임스타일 스타일 TABLE

예 1: 쓸모 없는 스타일

다음은 quote 조각:

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

예 2: 효과 스타일

다음은 인용된 부분입니다:

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

테이블 너비=1 이미 너비를 1
로 설정했습니다. 문제는 각 td 측면 라인이 1px이고 테이블 측면 라인도 1px이라는 것입니다. 그러면 두 개의 td가 인접해 있는 경우 각 td 측면 라인이 1이기 때문에 이동할 때 측면 라인의 "너비 합"은 1+1=2입니다. td와 table이 인접할 때도 마찬가지입니다.

collapse: 인접한 가장자리가 병합됩니다.

인접한 가장자리가 병합됩니다! 앞서 말한 것은 td와 td 사이, td와 table 사이의 인접 모서리 문제 때문에 1+1=2입니다. 기본적으로 인접한 가장자리는 병합되지 않으므로 1+1=2입니다. 이제 border-collapse:collapse를 사용하여 병합하므로 너비는 여전히 1px입니다. 즉, 얇은 테두리가 나타납니다.

cellspacing은 "0"으로 설정되었으며, 표시된 결과는 첫 번째 테이블의 각 셀 사이의 거리가 0이라는 것입니다. 테이블 테두리를 "0"으로 설정하면 셀 사이의 거리는 0이 됩니다
cellpadding 속성은 셀 내용과 셀 테두리
사이의 공백 거리의 크기를 지정하는 데 사용됩니다. 이 속성의 매개변수 값도 숫자이며, 이는 셀 내용과 위쪽 및 아래쪽 테두리 사이의 공백 거리의 높이가 차지하는 픽셀 수와 셀 내용 사이의 공백 거리의 너비가 차지하는 픽셀 수를 나타냅니다. 셀 내용과 왼쪽 및 오른쪽 테두리.

위 내용은 CSS 테이블에서 겹치는 셀 테두리의 border-collapse 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!