empty-cells
속성의 이해
empty-cells
속성은
테이블에서 '보이는 콘텐츠(visible content)가 없는 셀' 주위의
테두리(borders)와 배경(backgrounds)을 표시할지 여부를 설정합니다.
주의하세요!
border-spacing
속성은 테이블(<table>
)의 border-collapse
속성이 separate
로 설정되어 있을 때만 적용됩니다.
메뉴 | |
---|---|
라면 | 5,000 |
김밥 | |
돈까스 | |
떡볶이 | 4,000 |
형식 구문
/* 적용 요소: 테이블 셀(<th>, <td>) 요소 */
selector {
empty-cells: show | hide
}
구문
/* 키워드 값 */
empty-cells: show;
empty-cells: hide;
/* 전역 값 */
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;
값
show |
테두리(borders)와 배경(backgrounds)을 일반 셀과 같이 표시합니다.
초깃값입니다. |
---|---|
hide |
테두리(borders)와 배경(backgrounds)을 표시하지 않습니다. |
테이블에서 '보이는 콘텐츠(visible content)가 없는 셀' 주위의
테두리(borders)와 배경(backgrounds)을 표시할지 여부를 키워드 값(show
또는 hide
)으로 지정합니다.
보이는 콘텐츠(visible content)가 없는 셀
'보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되는 경우입니다.
비어 있는(empty) 셀
텍스트나 자식 요소 등 콘텐츠가 해당 셀에 아무것도 없을 때입니다.
<th></th>
<!-- 또는 -->
<td></td>
다음의 경우는 셀에 자식 요소가 있는 경우(자식 요소에 콘텐츠가 없다고 하더라도)이기 때문에 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되지 않습니다.
<th><span></span></th>
<!-- 또는 -->
<td><div></div></td>
<!-- 또는 .... -->
공백만 있는 셀
셀에 공백 문자(Whitespace)만 포함되어 있을 때입니다.
공백 문자(Whitespace)
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
<th> </th>
<!-- 또는 -->
<td> </td>
하지만, 공백 문자만 포함되어 있더라도 white-space
속성으로 공백이 화면에 표시되면 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되지 않습니다.
<td style="white-space: pre;"> </td>
예를 들어, white-space: pre
는 모든 공백 문자를 그대로 화면에 표시합니다. 따라서 공백이 실제로 보이게 되고, 이 셀은 '보이는 콘텐츠가 있는 셀'로 간주됩니다.
visibility
속성이 hidden
으로 설정된 셀
visibility
속성이 hidden
값으로 설정된 셀도 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주됩니다.
<th style="visibility: hidden;">콘텐츠</th>
<!-- 또는 -->
<td style="visibility: hidden;">콘텐츠</td>
셀의 콘텐츠가 떠 있는(floating content) 경우
셀의 콘텐츠가 떠 있는(floating content) 경우는 다음의 경우에 해당합니다.
- 셀의 콘텐츠가 CSS
position
속성의 값이absolute
또는fixed
로 설정되어 있는 경우
<td>
<span style="position: absolute;">콘텐츠</span>
</td>
<!-- 또는 -->
<td>
<span style="position: fixed;">콘텐츠</span>
</td>
주의할 점은 셀의 콘텐츠가 CSS float
속성의 값이 left
또는 right
로 설정되어 있는 경우에는 '보이는 콘텐츠(visible content)가 없는 셀'이라고 간주되지 않습니다.
<td>
<span style="float: left;">콘텐츠</span>
</td>
<!-- 또는 -->
<td>
<span style="float: right;">콘텐츠</span>
</td>
테두리(borders)와 배경(backgrounds)을 표시할지 여부
empty-cells
속성의 설정으로 영향을 받는 테두리(borders)와 배경(backgrounds)이 CSS의 어떤 속성인지 알아보겠습니다.
테두리(borders)
배경(backgrounds)
background-color
속성 - 요소의 배경색을 지정합니다.background-image
속성 - 요소의 배경 이미지를 지정합니다. 이미지 파일이나 그라디언트를 배경 이미지로 사용할 수 있습니다.
형식 정의
값 지정을 위한 선택자
/* 테이블 셀(<th>, <td>) 요소에 직접 지정하는 경우 */
th, td {
empty-cells: hide;
}
/* table 요소에 지정해서 테이블 셀 요소가 상속 받게 하는 경우 */
table {
empty-cells: hide;
}
예제
<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>
.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;
}
Cell 1.2 | |
Cell 2.1 | Cell 2.2 |
Cell 1.2 | |
Cell 2.1 | Cell 2.2 |
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
empty-cells
|
1 | 12 | 1 | 1.2 |
명세서
명세서 사양 | |
---|---|
empty-cells
|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification #empty-cells |