empty-cellsプロパティの説明
CSSのempty-cellsプロパティは、表のセルが空の場合に境界線や背景を表示するか非表示にするかを指定します。この機能は、border-collapseの値がseparateだった場合にのみ有効となります。
空のセルは、明確に描画される内容を持つかどうかで判断されます。例えば、単純な半角スペースであれば空の扱いになりますが、 のようにエンティティで明示してある場合は、内容があるものとみなされます。
empty-cellsに指定できる値
show- 通常のセルと同じように境界線や背景を表示します。これが初期値です。
hide- 空のセルは境界線や背景が消されて見えなくなります。ただし、セルの表示範囲は確保されたままです。
empty-cellsの使い方とサンプルコード
empty-cellsプロパティの構文は以下の通りです。
/* キーワード値 */
empty-cells: show;
empty-cells: hide;
/* グローバル値 */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;
empty-cellsの実例
それでは実際にempty-cellsプロパティの書き方を見ていきましょう。セルに境界線と背景色を指定した表を用意し、empty-cellsの値を変えた時の挙動を確かめます。
<table id="emptycell_s">
<caption>empty-cells: show;</caption>
<tr>
<th>TH</th>
<th></th>
<th>TH</th>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td></td>
</tr>
<tr>
<td></td>
<td>TD</td>
<td>TD</td>
</tr>
</table>
<table id="emptycell_h">
<caption>empty-cells: hide;</caption>
<tr>
<th>TH</th>
<th></th>
<th>TH</th>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td></td>
</tr>
<tr>
<td></td>
<td>TD</td>
<td>TD</td>
</tr>
</table>
table {
width: 100%;
margin-top: 1rem;
border-collapse: separate;
border-spacing: 3px;
border: 1px solid #999;
text-align: center;
}
tr > th {
border: 1px solid #f60;
background: #fc9;
}
tr > td {
border: 1px solid #06f;
background: #9cf;
}
#emptycell_s {
empty-cells: show;
}
#emptycell_h {
empty-cells: hide;
}