表
empty-cells
empty-cells は、中身の無い表のセルの枠線と背景を描くかどうかを指定します。
構文
show | hideプレビュー
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
border-spacing: 0.25em;
empty-cells: hide;
}コントロール
empty-cellshide
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
解説
値の意味
show：空のセルにも枠線と背景を描きます。初期値です。hide：空のセルの枠線と背景を描きません。
気をつけること
border-collapse: collapseのときは効きません。枠線が隣のセルとまとめられるからです。- 空のセルとは、中身が何も無いか、
white-spaceの処理で消える空白しか無いセルです。 は消えない空白なので、それだけ入っているセルは空になりません。 - 継承するプロパティなので、
table要素に書けば、中のセルすべてに効きます。
このページのプレビューでは、箱の中の表の左上のセルを空にして、箱に書いた値を受け取らせています。補助の宣言でセルの間を空けているので、hide にすると左上の枠だけが消えます。