[table] CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = border-collapse속성 = 보더컬랩스속성, 상속O)

1. border-collapse 예제 - 테두리 겹침 여부
2. border-collapse 정의
3. 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  (기본값)

• border-spacing 이나 빈 셀 속성 무시 X

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성 상속