empty-cells

Updated 2013.11.03 / Published 2007.02.02

empty-cellsプロパティは border-collapseプロパティで表の枠（ボーダー）の表示モデルに分離ボーダーモデル（border-collapse : separate ;）が用いられていた場合の内容をもたない空のセルの枠線の表示・非表示についての有無を指定します。

値

show
hide
inherit

初期値

show

適用対象

表のセル要素（td要素, th要素）

継承

する

メディア

visual

empty-cellsプロパティの値

empty-cellsプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

show: 内容をもたない空のセルの枠線を表示
hide: 内容をもたない空のセルの枠線を表示しない

内容をもたないセルとは、表のセル要素（td要素、th要素）内に何も入っていないセルと、visibilityプロパティで内容を非表示にしてしまう "hidden" の値が指定されているセルが対象になります。スペースなどの空白類文字（全角スペースは空白類文字ではありません）や改行禁止スペース（ ）が入っている場合は、空のセルになりません。

empty-cellsプロパティの実装状況

IE: ◯：IE8よりサポート
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

Internet Explorer 6, 7はempty-cellsプロパティに対応していません。Internet Explorer 6, 7において内容をもたないセルの枠線を表示するためには、空のままにしておくのではなく、セル要素内には改行禁止スペース（ ）などの何かしらの内容をもつ必要があります。

サンプル

.calendar,.calendar2 {
border-collapse : separate ;
border : 1px solid  #000;
}
.calendar caption,.calendar2 caption {
font-weight : bold ;
font-size : 2em ;
color : navy ;
}
.calendar th,.calendar2 th {
border : 1px solid #39f ;
}
.calendar td {
border : 1px solid #ff4500 ;
text-align : right ;
empty-cells : show ;
}
.calendar2 td {
border : 1px solid #ff4500 ;
text-align : right ;
empty-cells : hide ;
}