border-spacing 속성은 border-collapse:separate를 사용해 셀들을 분리했을 경우(테두리를 하나로 합치지 않았을 때) 인접한 셀 테두리 사이의 거리를 지정합니다.
border-spacing
border-spacing으로 표의 테두리와 셀의 테두리 사이의 간격의 크기를 정합니다.
기본형
border-spacing : length
예를 들어 length 값에 좌우 20px , 상하 10px으로 지정하려면 다음과 같이 합니다.
table {
border-collapse: separate;
border-spacing: 20px 10px;
}
속성 값을 하나만 쓰면 상하좌우 여백이 지정됩니다.
table {
border-collapse: separate;
border-spacing: 10px;
}
예제
<table>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
table {
width: 100%;
border: 1px solid #333333;
}
td {
padding: 10px;
border: 1px solid #333333;
}
.a {
border-spacing: 0px;
}
.b {
border-spacing: 5px;
}
.c {
border-spacing: 10px;
}
.d {
border-spacing: 5px 10px;
}
border-spacing은 border-collapse: separate일 때만 적용됩니다.