<table> 태그와 <td> 태그에서 border
속성을 사용하면 두 줄로 표시되는데, 이때 border-collapse 속성을 이용하면 표의
바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘지, 두 테두리를
하나로 합칠 것인지 결정할 수 있습니다.
border-collapse
border-collapse는 표의 테두리와 셀의 테두리 사이의 간격을 없앨지 말지를 정할 수 있습니다.
기본형
border-collapse : separate | collapse
- separate : 표의 테두리와 셀의 테두리 사이에 간격을 둡니다.
- collapse : 표의 테두리와 셀의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
예제
<table class="sep">
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
</table>
<table class="col">
<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;
}
.sep {
border-collapse: separate;
}
.col {
border-collapse: collapse;
}
표 테두리와 셀 테두리 사이의 간격의 크기는 border-spacing 속성으로 정합니다.