• Q&A
  • 회원가입
  • 로그인

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

border-collapse 예제1 - 테두리겹침 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>
 
 
 
border-collapse 예제2 - 테두리겹침 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
 
정보출처: 스파이크 님 
 
 
border-collapse 구문
 
selector {border-collapse :속성값;}
 

[속성값]
 
collapse
테두리 겹침 O 
border-spacing이나 빈 셀 속성 무시 O
 
separate
테두리 겹침 X  (기본값)
border-spacing 이나 빈 셀 속성 무시 X
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모요소의 속성 상속
 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012