Go to information

empty-cells

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

初期値
show
適用対象
表のセル要素td要素, th要素
継承
する
メディア
visual

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

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

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

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

Windows版Internet Explorer
×
Firefox
Opera
○(初期値が "hide" に設定されている)
Safari
Macintosh版Internet Explorer 5
×

CSS2 仕様の初期値は枠線を表示する "show" のため、Firefox, Netscape, Safari においては、"empty-cells : show ;" を指定していなくても、内容をもたないセルの枠線はデフォルトで表示される設定になっています。しかし、Opera では初期値が "hide" に設定されているため、内容をもたないセルの枠線の表示するには、"empty-cells : show ;" を指定する必要があります。

Windows版Internet Explorer 6, Windows版Internet Explorer 7、及び Macintosh版Internet Explorer 5 は empty-cellsプロパティに対応していません。これらのブラウザで内容をもたないセルの枠線を表示するためには、空のままにしておくのではなく、改行禁止スペース( )などの何かしらの内容を挿入する必要があります。

サンプル

記述例
.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 ;
}
表示例
現在位置
  1. W3G
  2. CSS
  3. テーブル
  4. empty-cells
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:15:22+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/table/empty-cells
検索

直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!