본문 바로가기
블로그&인터넷/CSS

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

by INKman 2022. 5. 1.
반응형

테이블에 border-collapse: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' 라인 속성을 추가하면 일반 선으로 변경됩니다.

반응형

댓글0