목차
border-collapse 예제 - 테두리 겹침 여부
border-collapse 정의
border-collapse 구문
border-collapse 예제 - 테두리겹침 여부
[테두리 겹침 O]
<style> table, td {border:1px solid; border-collapse:collapse ;} </style>
<table> <tr><td><h1>홈짱닷컴 (homzzang.com)</h1></td></tr> <tr><td><h1>HTML CSS 무료 강의 홈피</h1></td></tr>
</table>
[테두리 겹침 X] (기본값)
<style> table, td {border:1px solid; border-collapse:seperate ;} </style>
<table> <tr><td><h1>홈짱닷컴 (homzzang.com)</h1></td></tr> <tr><td><h1>HTML CSS 무료 강의 홈피</h1></td></tr>
</table>
border-collapse 정의
테이블셀 테두리가 겹칠 때 한 줄로 겹쳐보이게 할지 두 줄로 보이게 할지 지정.
1.
기본값 : separate
상속여부 : O
애니효과 : X
CSS버전 : CSS2
JS 구문 : object .style.borderCollapse ="collapse";
2.
border-style:hidden 지정된 것이 가장 우선.
border-style:none 지정된 것은 우선 순위가 가장 낮음.
hidden과 none 이외 값 지정 시, 폭 두꺼운 테두리 선이 가장 우선.
3.
굵기가 같은 경우 테두리 선의 종류에 따라 아래와 같은 우선 순위를 가지게 됨.
double > solid > dashed > dotted > ridge > autoset > groove > inset
4.
굵기가 같고 테두리 종류가 동일하고 색상(border-color)만 다른 경우
TH > TD > TR > thead = tbody = tfoot > col > colgroup > table
5.
border-collapse 구문
selector {border-collapse : collapse|seperate|initial|inherit; }
[속성값]
collapse
테두리 겹침 O
border-spacing이나 빈 셀 속성 무시 O
separate
테두리 겹침 X (기본값)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성 상속
주소 복사
랜덤 이동