「空っぽのセル」の枠線や背景を描画するかどうかを指定したい

ウェブ上でテーブル(表)を使う場合に、border-collapseプロパティに値「collapse」を指定しなければ（つまり、デフォルトの値「separate」が指定されていれば）隣り合うセル同士はくっつきません。
このときに限って、「空っぽのセル」の枠線や背景を描画するかどうかを指定できます。
その方法が、empty-cellsプロパティです。

空っぽのセルに枠線や背景を付けるかどうか

以下のテーブルには、3行×3列の合計9個のセルがあります。このうち、中央（2行目の2列目）のセルにだけは、中身がありません。
empty-cellsプロパティを使って、空っぽのセルの枠線・背景を制御すると、以下のように見えます。

この方法なら、背景や枠線を消すためだけにわざわざclass属性を使って特別なスタイルを適用するような工夫は不要です。
なお、このempty-cellsプロパティには、値「show」か「hide」を指定します。以下のように記述するだけの簡単なプロパティです。

▼空っぽのセルの枠線・背景を表示する場合（デフォルト）：

▼空っぽのセルの枠線・背景を消す場合：

このプロパティの記述自体を省略すれば、値「show」を指定したことになります。

(補足) 互換モードでの表示

古いブラウザの互換モード(＝ウェブページが非標準な文法で記述されている場合に使われる表示モード)で閲覧した場合は、以下のような表示になりました。

• 値「show」を指定： 枠線も背景も表示される (規定の動作)
• 値「hide」を指定： 枠線も背景も消える (規定の動作)
• 何も指定しない： 背景は表示されるが、枠線は消える （※本来は枠線も表示されるはず）

互換モードで描画されるようなページでもempty-cellsプロパティを省略せずに記述した場合は、規定通りの表示になりました。なので、「空っぽのセルに対する枠線」を（消したい場合だけでなく）明確に引きたい場合にも、念のためにempty-cellsプロパティを記述しておくと良いかも知れません。

空っぽのセルの枠線・背景の有無を指定するサンプルソース

なお、冒頭のサンプルを表示するHTML・CSSソースは以下の通りです。

■HTMLソース(テーブル部分)：

中央のセル（2行目・2列目）だけが空っぽです。

■CSSソース(空っぽのセルの枠線・背景を消す場合)：

※1：先にも述べましたが、table要素に対して、border-collapseプロパティに値「collapse」を指定すると、empty-cellsプロパティの指定は無視されます。empty-cellsプロパティは、テーブル内で上下左右に隣接するセル同士をくっつけない場合に有効になる指定です。

※2：paddingプロパティ(セル内側の余白)、font-sizeプロパティ(文字サイズ)、font-familyプロパティ(表示フォント)は、サンプル用に記載しただけであって、記述は必須ではありません。

というわけで、セル同士の枠線をくっつけないデザインのテーブルで、中身が空のセルに対する枠線や背景の表示・非表示を指定したい場合に活用して下さい。

空っぽのセルに斜線を引きたい場合

なお、空っぽのセルには対角線(斜線)を引きたいケースもありそうです。その場合のCSSの記述方法はAll Aboutで記事にしましたので、ぜひご参照下さい。
→「表の空っぽのセルにだけ、CSSで斜線を引く方法」

(更新日：2016年03月14日)※初版は2014年06月08日に公開されました。