목차
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 ]
값이 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>
결과보기
