목차
- border-spacing 예제 - 셀간의 거리 가로/세로 각각 지정
- border-spacing 정의
- border-spacing 구문
- border-spacing 예제 - 셀간의 거리 가로/세로 동시 지정
- border-spacing 예제 - 테이블헤드 스크롤 고정 시 0 설정
border-spacing 예제 - 셀간의 거리 가로/세로 각각 지정
<style>
table, td, th {
border: 1px solid gray;
}
table {
border-collapse: separate;
border-spacing: 15px 30px;
}
</style>
<table>
<tr>
<td><h1>홈짱닷컴 (homzzang.com)</h1></td>
</tr>
<tr>
<td><h1>HTML CSS 무료 강의 홈피</h1></td>
</tr>
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>
결과보기
