empty-cells 속성
empty-cells 속성은 빈 td 또는 th 테이블 셀의
배경과 테두리를 브라우저에 어떻게 표시할지 지정합니다:
표시할지 말지.
셀은 다음과 같은 경우에 빈 것으로 간주됩니다:
어떤 문자도 없거나, 셀에 공백(하나 이상), 줄바꿈
또는 탭 문자만 포함되어 있거나, 혹은
visibility
속성이 hidden으로 설정된 경우.
셀을 비지 않게 만들면서 보이는 텍스트 없이 하려면,
다음 방법을 사용합니다: 셀에 줄바꿈 없는 공백
을 기록합니다.
이 속성은 border-collapse
속성이 collapse 값으로 설정된 경우 작동하지 않습니다.
문법
선택자 {
empty-cells: show | hide;
}
값
| 값 | 설명 |
|---|---|
show |
빈 셀의 배경과 테두리가 표시됩니다. |
hide |
빈 셀의 배경과 테두리가 표시되지 않습니다. |
기본값: show.
예제 . show 값
현재 테이블에 일부 셀이 비어 있지만, 그래도 테두리와 배경을 가지고 있습니다:
<table>
<tr>
<td>cell</td>
<td></td>
<td>cell</td>
</tr>
<tr>
<td></td>
<td>cell</td>
<td></td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
예제 . hide 값
이제 빈 셀들은 배경과 테두리를 가지지 않을 것입니다:
<table>
<tr>
<td>cell</td>
<td></td>
<td>cell</td>
</tr>
<tr>
<td></td>
<td>cell</td>
<td></td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
관련 항목
-
빈 요소가 어떻게 보일지 지정하는
의사 클래스empty
