CSS의 empty-cells 속성은 테이블에서 내용이 없는 빈 셀이 있을 때, 해당 셀의 테두리와 배경을 표시할지 여부를 결정하는 속성입니다. 데이터가 비어 있는 셀까지 테두리를 그릴지, 아니면 시각적으로 숨길지를 손쉽게 제어할 수 있어 깔끔한 테이블 디자인에 유용합니다.
empty-cells 속성의 주요 값
empty-cells 속성은 다음 세 가지 값을 가질 수 있습니다.
- show — 기본값으로, 셀이 비어 있어도 테두리와 배경을 표시합니다.
- hide — 셀에 내용이 없으면 테두리와 배경을 표시하지 않습니다.
- inherit — 부모 요소의 empty-cells 값을 상속받습니다.
참고로 이 속성은 border-collapse: separate; 상태에서만 정상적으로 동작하며, border-collapse: collapse;로 설정된 테이블에서는 적용되지 않습니다.
사용 예제
아래 예제는 empty-cells 속성을 hide로 설정하여, 내용이 없는 셀의 테두리를 숨기는 방법을 보여줍니다.
<html>
<head>
<style>
table.empty{
width:400px;
border-collapse:separate;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">R1T1</td>
<td class = "empty">R1T2</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">R2T1</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>예제 설명
위 코드에서 두 번째 행의 마지막 셀(R2T2)은 내용이 비어 있습니다. 테이블에 empty-cells: hide;가 적용되어 있기 때문에 브라우저는 해당 빈 셀의 테두리를 렌더링하지 않습니다. 반대로 empty-cells: show;로 설정하면 내용이 없어도 모든 셀에 테두리가 표시됩니다.
활용 팁
empty-cells 속성은 대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. 데이터 목록이나 일정표처럼 빈 칸이 자주 발생하는 테이블에서 시각적 균형을 맞추거나, 불필요한 선을 제거해 화면을 더 깔끔하게 정리하고 싶을 때 활용하면 좋습니다.