empty-cells プロパティ
empty-cells プロパティは、ブラウザに対して
HTMLのtdセルやthセル、
テーブルの空セルの背景と境界線を表示するか否かを指示します。
セルは以下の場合に空と見なされます：
全く文字がない場合、セルに空白（1つまたは複数）、
改行、タブ文字のみが含まれる場合、
またはvisibility
プロパティがhiddenに設定されている場合。
セルを空でなく、かつ見えるテキストなしにするには、
次の手法を用います：セルにノーブレークスペース
を記述します。
このプロパティは、border-collapseが
collapseに設定されている場合には機能しません。
構文
セレクター {
empty-cells: show | hide;
}
値
| 値 | 説明 |
|---|---|
show |
空のセルの背景と境界線を表示します。 |
hide |
空のセルの背景と境界線を表示しません。 |
初期値：show。
例 . show 値
現在、テーブルにはいくつかの空セルがありますが、 それらも境界線と背景を持っています：
<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>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
例 . hide 値
今回は、空のセルは背景と境界線を持ちません：
<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>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
関連項目
-
empty 疑似クラス
空の要素の見た目を指定します。
