목차
- 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
부모요소의 속성 상속