CSS / Reference / empty-cells

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

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 빈 셀 하나에 일반 공백, NBSP( ), 텍스트를 차례로 넣어 테두리·배경을 비교합니다.
2. 같은 표를 collapse로 바꾸어 hide/show 차이를 확인한 뒤 separate와 빈 셀로 복구합니다. 셀 공간 자체가 삭제되는지와 그림이 숨겨지는지는 별도로 봅니다.

표 전체의 너비와 셀 크기를 함께 조정하려면 표와 셀의 크기 조절하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 border-spacing입니다.

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

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