このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

empty-cells:空白セルの表示

記事Feb. 17th,2021
テーブルの空白セルの表示を指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 empty-cells: show;
適用対象 テーブル・セル要素
継承 する
パーセント値 パーセント値は指定できません

empty-cells”プロパティはborder-collapse”プロパティの値が“separate”である場合に、内容のないセルの境界線背景を描画するかどうかを指定するプロパティです。

border-collapse”プロパティの値が“collapse”である場合には“empty-cells”プロパティは意味を持ちません。

サンプルコード

table { empty-cells: hide;}

説明
show 空白セルの境界線と背景を描画する (空白でないセルと同様に描画されます。)
hide 空白セルの境界線と背景を描画しない (行のすべてのセルが空白である場合、その行の高さは“0”となり、垂直方向の境界線の間隔は片側だけ空けられます。)

仕様書

Level 1 Level 2
勧告(REC) 勧告(REC)
empty-cells
定義なし

定義あり
Level 1 Level 2
勧告(REC) 勧告(REC)
show
定義なし

定義あり
hide
定義なし

定義あり

使用例

空白セルを表示する

table {
border-collapse: separate;
empty-cells: show;
}
<table>
<tr>
<th>会員番号</th>
<th>名前</th>
<th>住所</th>
</tr>
<tr>
<td>001</td>
<td>アザラシ</td>
<td>北極</td>
</tr>
<tr>
<td>002</td>
<td></td>
<td>南極</td>
</tr>
<tr>
<td>003</td>
<td>シャチ</td>
<td></td>
</tr>
</table>
会員番号 名前 住所
001 アザラシ 北極
002 南極
003 シャチ

空白セルを表示しない

table {
border-collapse: separate;
empty-cells: hide;
}
<table>
<tr>
<th>会員番号</th>
<th>名前</th>
<th>住所</th>
</tr>
<tr>
<td>001</td>
<td>アザラシ</td>
<td>北極</td>
</tr>
<tr>
<td>002</td>
<td></td>
<td>南極</td>
</tr>
<tr>
<td>003</td>
<td>シャチ</td>
<td></td>
</tr>
</table>
会員番号 名前 住所
001 アザラシ 北極
002 南極
003 シャチ
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク