표 스타일 CSS - empty-cells / width, height

표 스타일 CSS - empty-cells

• border-collapse : separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정합니다.
• 기본형 : empty-cells : show / hide

 

속성 값	설명
show	빈 셀 주위에 테두리를 그려 빈셀을 표시합니다. (기본 값)
hide	빈 셀에 테두리를 그리지 않고 비워 둡니다.

empty-cells : show를 지정했을 때

 

empty-cells : hide를 지정했을 때

 

<style>
    .exam1, .exam2 {border-collapse: separate; border: 2px solid pink; width: 700px; padding: 15px;}
    .exam1 td {empty-cells : show; border: 2px solid powderblue; text-align: center;}
    .exam2 td {empty-cells : hide; border: 2px solid powderblue; text-align: center;}
</style> 

표 스타일 CSS - width, height

• 표와 셀의 형태를 꾸리기 위해 CSS의 width와 height를 사용합니다.
• 표와 셀의 너비와 높이를 특별히 지정하지 않는다면 셀 안의 내용이 표시될 만큼만 표시됩니다.
• 이때 사용할 수 있는 값은 실제 크기를 나타내는 px나 부모 요소를 기준으로 한 %입니다.
• 표의 너비를 지정하고 셀의 너비를 지정하지 않는다면 내용이 없을 경우의 표의 너비를 셀의 개수로 나누어 셀의 너비를 일정하게 지정하고 내용이 있다면 내용에 따라 동일한 비율로 지정합니다.

 

표의 너비만 width : 500px로 지정했을 경우

 

표의 너비를 500px로 지정하고 셀의 너비도 각각 50%, 50% 지정했을 경우

 

<style>
    .exam3 {width: 500px; border: 2px solid pink; padding: 15px;}
    .exam3 th, td { border: 2px solid powderblue; text-align: center; padding: 10px;}
    .exam4 {width: 500px; border: 2px solid pink; padding: 15px;}
    .exam4 th {width: 50%; border: 2px solid powderblue; text-align: center; padding: 10px;}
    .exam4 td {width: 50%; border: 2px solid powderblue; text-align: center; padding: 10px;}
</style>