empty-cells プロパティ

empty-cells プロパティは、ブラウザに対して HTMLのtdセルやthセル、 テーブルの空セルの背景と境界線を表示するか否かを指示します。

セルは以下の場合に空と見なされます： 全く文字がない場合、セルに空白（1つまたは複数）、 改行、タブ文字のみが含まれる場合、 またはvisibility プロパティがhiddenに設定されている場合。

セルを空でなく、かつ見えるテキストなしにするには、 次の手法を用います：セルにノーブレークスペース  を記述します。

このプロパティは、border-collapseが collapseに設定されている場合には機能しません。

構文

cssセレクター {
  empty-cells: show | hide;
}

値

初期値：show。

例 . show 値

現在、テーブルにはいくつかの空セルがありますが、 それらも境界線と背景を持っています：

html<table>
  <tr>
    <td>セル</td>
    <td></td>
    <td>セル</td>
  </tr>
  <tr>
    <td></td>
    <td>セル</td>
    <td></td>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
    <td>セル</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>セル</td>
    <td></td>
    <td>セル</td>
  </tr>
  <tr>
    <td></td>
    <td>セル</td>
    <td></td>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

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

Результат:

関連項目