empty-cells 속성

empty-cells 속성은 빈 td 또는 th 테이블 셀의 배경과 테두리를 브라우저에 어떻게 표시할지 지정합니다: 표시할지 말지.

셀은 다음과 같은 경우에 빈 것으로 간주됩니다: 어떤 문자도 없거나, 셀에 공백(하나 이상), 줄바꿈 또는 탭 문자만 포함되어 있거나, 혹은 visibility 속성이 hidden으로 설정된 경우.

셀을 비지 않게 만들면서 보이는 텍스트 없이 하려면, 다음 방법을 사용합니다: 셀에 줄바꿈 없는 공백  을 기록합니다.

이 속성은 border-collapse 속성이 collapse 값으로 설정된 경우 작동하지 않습니다.

문법

css선택자 {
  empty-cells: show | hide;
}

값

기본값: show.

예제 . show 값

현재 테이블에 일부 셀이 비어 있지만, 그래도 테두리와 배경을 가지고 있습니다:

html<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>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

예제 . hide 값

이제 빈 셀들은 배경과 테두리를 가지지 않을 것입니다:

html<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>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

관련 항목