CSS / Reference / empty-cells

empty-cells는 분리된 테두리 모델의 표에서 비어 있는 셀의 테두리와 배경을 표시할지 정합니다. hide로 숨겨도 셀의 공간이 없어지지는 않으며, border-collapse: collapse인 표에는 적용되지 않습니다.

문법과 주요 값

table { border-collapse: separate; empty-cells: hide; }

값의 적용 범위와 문법은 MDN의 empty-cells 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 empty-cells-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>empty-cells 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
table { border-collapse: separate; border-spacing: 8px; }
td { padding: 12px; border: 2px solid #006c9c; background: #bfe3ff; }
.target { empty-cells: hide; }
.reference { empty-cells: show; }
</style>
</head>
<body>
<main id="demo">
<h1>empty-cells 적용 비교</h1>
<section class="samples"><div><p class="label">hide</p><table class="target"><tbody><tr><td>내용</td><td></td></tr><tr><td>두 번째</td><td>값</td></tr></tbody></table></div><div><p class="label">show</p><table class="reference"><tbody><tr><td>내용</td><td></td></tr><tr><td>두 번째</td><td>값</td></tr></tbody></table></div></section>
</main>
</body>
</html>

빈 두 번째 셀의 배경과 테두리가 첫 표에서는 숨겨집니다. 행·열 구조와 그 셀이 차지하는 공간은 유지됩니다.

빈 셀의 의미

셀에 표시할 텍스트나 이미지가 있으면 빈 셀로 취급되지 않을 수 있습니다.   같은 줄바꿈 없는 공백을 넣으면 정말 비어 있는 셀과 결과가 달라질 수 있으므로 장식용 공백으로 표 구조를 맞추지 마세요.

셀 삭제와 표시 제어 구분

empty-cells는 표의 행·열을 삭제하거나 값을 필터링하는 기능이 아닙니다. 빈 데이터 자체를 설명해야 한다면 셀에 해당 없음 같은 의미 있는 문구를 넣는 것이 독자에게 더 명확할 수 있습니다. 셀 사이 간격과 바깥 표 테두리는 별도의 속성으로 정합니다.

적용되지 않거나 예상과 다를 때

• Computed에서 border-collapse가 separate인지 확인합니다.
• 숨겨지지 않는 셀 안의 공백, 가상 요소와 자식 콘텐츠를 확인합니다.

관련 설정을 함께 조정할 때는 분리된 셀 사이의 border-spacing을 참고하세요.