목차
- border-collapse 예제 - 테두리 겹침 여부
- border-collapse 정의
- border-collapse 구문
border-collapse 예제 - 테두리겹침 여부
[테두리 겹침 O]
<style>
table {border-collapse:collapse;}
td {border:1px solid;}
</style>
<table>
<tr><td><h1>홈짱닷컴 (homzzang.com)</h1></td></tr>
<tr><td><h1>HTML CSS 무료 강의 홈피</h1></td></tr>
</table>
[테두리 겹침 X] (기본값)
<style>
table {border-collapse:seperate;}
td {border:1px solid;}
</style>
<table>
<tr><td><h1>홈짱닷컴 (homzzang.com)</h1></td></tr>
<tr><td><h1>HTML CSS 무료 강의 홈피</h1></td></tr>
</table>
border-collapse 정의
테이블셀 테두리가 겹칠 때 한 줄로 겹쳐보이게 할지 두 줄로 보이게 할지 지정.
1.
이 속성은
<table> 요소에만 적용. (즉, th, td 요소엔 적용할 필요 없음.)
2.
- 기본값 : separate
- 상속여부 : O
- 애니효과 : X
- CSS버전 : CSS2
- JS 구문 : object.style.borderCollapse="collapse";
3.
- border-style:hidden 지정된 것이 가장 우선.
- border-style:none 지정된 것은 우선 순위가 가장 낮음.
- hidden과 none 이외 값 지정 시, 폭 두꺼운 테두리 선이 가장 우선.
4.
- 굵기 같은 경우 테두리 선 종류별 우선 순위: double > solid > dashed > dotted > ridge > autoset > groove > inset
- 굵기가 같고 테두리 종류가 동일하고 색상(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
부모요소의 속성 상속
