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

初期値
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 ;
}
Updated / Published