테이블 속성 border-collapse:collapse 속성이 붙어있으면 표의 칸마다 기본적으로 설정되어 있는 간격을 없애게 됩니다.
border-collapse 테이블 속성
| initial | 기본값으로 설정합니다. |
| inherit | 부모 요소의 상속받습니다. |
| separate | table과 td 사이에 간격을 둡니다. |
| collapse | table과 td 사이의 간격을 두지 않습니다. |
| initial | initial | initial |
| initial | initial | initial |
separate, initial, 기본 값으로 하거나 속성을 부여하지 않았을 경우 위처럼 셀간의 간격이 자동으로 생기게 됩니다.
| collapse | collapse | collapse |
| collapse | collapse | collapse |
collapse 테이블 속성을 부여하게 되면 간격 없이 선끼리 겹쳐 하나의 선으로 표를 만들게 됩니다.
| border-collapse | border-collapse | border-collapse |
| border-collapse | border-collapse | border-collapse |
collapse 적용하면 내부 ‘padding’ 속성이 0으로 되어 위처럼 내부 여백이 적용되지 않습니다.
<table style="border-collapse: collapse; padding: 150px; width: 100%; border: 1px solid #e6e6e6;">
<tbody>
<tr>
<td style="width: 100%; border: 1px solid #e6e6e6;">border-collapse</td>
</tr>
<tr>
<td style="width: 100%; border: 1px solid #e6e6e6;">border-collapse</td>
</tr>
</tbody>
</table>| border-collapse |
| border-collapse |
collapse속성을 적용하면 padding를 150px 이나 줬는데도 전혀 속성이 적용되지 않습니다.
<table style="border-collapse: separate; padding: 150px; width: 100%; border: 1px solid #e6e6e6;">
<tbody>
<tr>
<td style="width: 100%; border: 1px solid #e6e6e6;">border-collapse</td>
</tr>
<tr>
<td style="width: 100%; border: 1px solid #e6e6e6;">border-collapse</td>
</tr>
</tbody>
</table>| border-collapse |
| border-collapse |
separate으로 속성을 변경하면 padding 속성이 적용됩니다.
일부 스킨이나 티스토리 북클럽 스킨의 경우 ‘border-collapse: collapse’ 속성이 CSS 스타일 시트에 적용되어 있어 ‘border-collapse: separate , initial’ 속성을 부여해야 스킨에서 부여된 collapse속성의 영향을 받지 않습니다.
표에 음영이 들어갈 경우 ‘border: 1px solid #e6e6e6’ 라인 속성을 추가하면 일반 선으로 변경됩니다.