콘텐츠로 건너뛰기

테이블 속성 ‘border-collapse’ 설정 padding 적용 안될 때


테이블 속성 'border-collapse' 설정 padding 적용 안될 때 - 1

테이블 속성 border-collapse:collapse 속성이 붙어있으면 표의 칸마다 기본적으로 설정되어 있는 간격을 없애게 됩니다.

border-collapse 테이블 속성

initial기본값으로 설정합니다.
inherit부모 요소의 상속받습니다.
separatetable과 td 사이에 간격을 둡니다.
collapsetable과 td 사이의 간격을 두지 않습니다.
initialinitialinitial
initialinitialinitial

separate, initial, 기본 값으로 하거나 속성을 부여하지 않았을 경우 위처럼 셀간의 간격이 자동으로 생기게 됩니다.

collapsecollapsecollapse
collapsecollapsecollapse

collapse 테이블 속성을 부여하게 되면 간격 없이 선끼리 겹쳐 하나의 선으로 표를 만들게 됩니다.

border-collapseborder-collapseborder-collapse
border-collapseborder-collapseborder-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’ 라인 속성을 추가하면 일반 선으로 변경됩니다.

#css #테이블 #table #속성 #border-collapse #padding #Collapse #initial #separate #Inherit

티스토리 블로그 공감 버튼 이동하기

태그:

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다