empty-cells 속성의 이해

empty-cells 속성은
테이블에서 '보이는 콘텐츠(visible content)가 없는 셀' 주위의
테두리(borders)와 배경(backgrounds)을 표시할지 여부를 설정합니다.

주의하세요!
border-spacing 속성은 테이블(<table>)의 border-collapse 속성이 separate로 설정되어 있을 때만 적용됩니다.

CSS 데모: empty-cells 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
/* 적용 요소: 테이블 셀(<th>, <td>) 요소 */
selector {
    empty-cells: show | hide
}

구문

CSS 
/* 키워드 값 */
empty-cells: show;
empty-cells: hide;

/* 전역 값 */
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;

값

empty-cells 속성의 값
show 테두리(borders)와 배경(backgrounds)을 일반 셀과 같이 표시합니다.
초깃값입니다.
hide 테두리(borders)와 배경(backgrounds)을 표시하지 않습니다.

테이블에서 '보이는 콘텐츠(visible content)가 없는 셀' 주위의
테두리(borders)와 배경(backgrounds)을 표시할지 여부를 키워드 값(show 또는 hide)으로 지정합니다.

보이는 콘텐츠(visible content)가 없는 셀

'보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되는 경우입니다.

비어 있는(empty) 셀

텍스트나 자식 요소 등 콘텐츠가 해당 셀에 아무것도 없을 때입니다.

HTML 
<th></th>
<!-- 또는 -->
<td></td>

다음의 경우는 셀에 자식 요소가 있는 경우(자식 요소에 콘텐츠가 없다고 하더라도)이기 때문에 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되지 않습니다.

HTML 
<th><span></span></th>
<!-- 또는 -->
<td><div></div></td>
<!-- 또는 .... -->
공백만 있는 셀

셀에 공백 문자(Whitespace)만 포함되어 있을 때입니다.

공백 문자(Whitespace)
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.

HTML 
<th>  </th>
<!-- 또는 -->
<td> </td>

하지만, 공백 문자만 포함되어 있더라도 white-space 속성으로 공백이 화면에 표시되면 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되지 않습니다.

HTML 
<td style="white-space: pre;">   </td>

예를 들어, white-space: pre는 모든 공백 문자를 그대로 화면에 표시합니다. 따라서 공백이 실제로 보이게 되고, 이 셀은 '보이는 콘텐츠가 있는 셀'로 간주됩니다.

visibility 속성이 hidden으로 설정된 셀

visibility 속성이 hidden 값으로 설정된 셀도 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주됩니다.

HTML 
<th style="visibility: hidden;">콘텐츠</th>
<!-- 또는 -->
<td style="visibility: hidden;">콘텐츠</td>
셀의 콘텐츠가 떠 있는(floating content) 경우

셀의 콘텐츠가 떠 있는(floating content) 경우는 다음의 경우에 해당합니다.

  • 셀의 콘텐츠가 CSS position 속성의 값이 absolute 또는 fixed로 설정되어 있는 경우
HTML 
<td>
    <span style="position: absolute;">콘텐츠</span>
</td>
<!-- 또는 -->
<td>
    <span style="position: fixed;">콘텐츠</span>
</td>

주의할 점은 셀의 콘텐츠가 CSS float 속성의 값이 left 또는 right로 설정되어 있는 경우에는 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되지 않습니다.

HTML 
<td>
    <span style="float: left;">콘텐츠</span>
</td>
<!-- 또는 -->
<td>
    <span style="float: right;">콘텐츠</span>
</td>

empty-cells 속성의 설정으로 영향을 받는 테두리(borders)와 배경(backgrounds)이 CSS의 어떤 속성인지 알아보겠습니다.

테두리(borders)
  • border에 해당하는 속성 - 요소 경계 테두리의 너비, 스타일, 색상을 지정합니다.
  • outline에 해당하는 속성 - 요소의 경계(border) 바깥쪽에 있는 외곽선의 너비, 스타일, 색상을 지정합니다.
배경(backgrounds)
  • background-color 속성 - 요소의 배경색을 지정합니다.
  • background-image 속성 - 요소의 배경 이미지를 지정합니다. 이미지 파일이나 그라디언트를 배경 이미지로 사용할 수 있습니다.

형식 정의

empty-cells 속성의 형식 정의
초깃값 show
적용 요소 테이블 셀(<th>, <td>) 요소
상속 예
애니메이션 아니오

값 지정을 위한 선택자

empty-cells는 기본적으로 상속(inherit)되는 속성입니다.
따라서 테이블 셀(<th>, <td>) 요소에 지정하지만, 많은 개발자들은 이 속성을 적용할 테이블 셀의 조상 요소인 <table>에 지정하는 경우가 많습니다. 두 경우 모두 동일한 결과를 가져옵니다.

CSS 두 경우 모두 동일한 결과를 가져옵니다. 
/* 테이블 셀(<th>, <td>) 요소에 직접 지정하는 경우 */
th, td {
    empty-cells: hide;
}

/* table 요소에 지정해서 테이블 셀 요소가 상속 받게 하는 경우 */
table {
    empty-cells: hide;
}

예제

HTML 
<table class="show-empty-cells">
    <caption>
        <code>empty-cells: show</code>
    </caption>
    <tr>
        <td></td> <!-- 비어 있는 셀 -->
        <td>Cell 1.2</td>
    </tr>
    <tr>
        <td>Cell 2.1</td>
        <td>Cell 2.2</td>
    </tr>
</table>
<table class="hide-empty-cells">
    <caption>
        <code>empty-cells: hide</code>
    </caption>
    <tr>
        <td></td> <!-- 비어 있는 셀 -->
        <td>Cell 1.2</td>
    </tr>
    <tr>
        <td>Cell 2.1</td>
        <td>Cell 2.2</td>
    </tr>
</table>
CSS 
.show-empty-cells {
    empty-cells: show;
}
.hide-empty-cells {
    empty-cells: hide;
}

table {
    display: inline-table;
    margin: 1em;
}
td {
    border: 3px solid;
    border-color: red blue orange green;
    padding: 0.5em 2em;
}
실제 적용된 모습
empty-cells 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
empty-cells 1 12 1 1.2

명세서

empty-cells 속성의 명세서 사양
명세서 사양
empty-cells Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#empty-cells

참고문헌

같이 보기