> 웹 프론트엔드 > CSS 튜토리얼 > CSS 테이블에서 겹치는 셀 테두리의 border-collapse 속성

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

黄舟
풀어 주다: 2017-06-30 09:46:14
원래의
4238명이 탐색했습니다.

구문: ​​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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿