• 회원가입
  • 로그인

[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
테두리 겹침 O 
  • border-spacing이나 빈 셀 속성 무시 O
 
separate
테두리 겹침 X  (기본값)
  • border-spacing 이나 빈 셀 속성 무시 X
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모요소의 속성 상속
 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

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