[table] CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보더스페이싱속성, IE8) ★

목차

1. border-spacing 예제 - 셀간의 거리 가로/세로 각각 지정
2. border-spacing 정의
3. border-spacing 구문
4. border-spacing 예제 - 셀간의 거리 가로/세로 동시 지정
5. border-spacing 예제 - 테이블헤드 스크롤 고정 시 0 설정

border-spacing 예제 - 셀간의 거리 가로/세로 각각 지정

border-spacing 정의

 

테이블 셀 테두리 간의 간격 지정.

 

---

 

1.

• <table> 요소에만 사용 가능.
• border-collapse:seperate 일 때 작동. (즉, border-collapse:collapse 일 땐, 작동 X)

 

2. 

• 기본값: 2px
• 상속여부: O
• 애니효과: O
• CSS버전: CSS2
• JS구문: object.style.borderSpacing="15px"

 

3.

IE8 이상 주요 최신 브라우저 지원.

 

4. MDN border-spacing 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

 

border-spacing 구문

 

selector {border-spacing: length [length] |initial|inherit;}

 

---

[속성값]

 

length [length]
px, cm 등 길이 단위. (0이나 양수만 가능. 음수는 불가.)

• 값이 1개인 경우: 가로 세로 동일. (예) border-spacing: 5px;
• 값이 2개인 경우: 가로 세로 개별. (예) border-spacing: 5px 10px;
• 스크롤헤드 고정 시, table 요소에 border-collapse: separate; border-spacing: 0; 설정.

  

initial

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

 

inherit
부모 요소의 속성을 상속

---

PS. 속성값 2개 시 의미 차이

• border-spacing 경우:   (앞:수평 / 뒤:수직)
• margin, padding 경우: (앞:수직 / 뒤:수평)

 

border-spacing 예제 - 셀간의 거리 가로/세로 동시 지정

 

<style>

table, td, th {

  border: 1px solid gray;

}

table {

  border-collapse: separate;

  border-spacing: 15px;

}

</style>

 

<table>

    <tr>

      <td><h1>홈짱닷컴 (homzzang.com)</h1></td>

   </tr>

    <tr>

      <td><h1>HTML CSS 무료 강의 홈피</h1></td>

   </tr>

</table>

 

결과보기