にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi via WordPress.

中身が空のセルに枠線や背景を付けないようにする [テーブル,]

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

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

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

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

54A 71B 04C
63D 42E
92F 51G 22H

▼空っぽのセルの枠線・背景を表示する場合

54A 71B 04C
63D 42E
92F 51G 22H

▼空っぽのセルの枠線・背景について何も指定しなかった場合(デフォルトの表示)

54A 71B 04C
63D 42E
92F 51G 22H

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

▼空っぽのセルの枠線・背景を表示する場合(デフォルト):

empty-cells: show;

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

empty-cells: hide;

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

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

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

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

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

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

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

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

<table class="sample">
   <tr><td>54A</td><td>71B</td><td>04C</td></tr>
   <tr><td>63D</td><td></td><td>42E</td></tr>
   <tr><td>92F</td><td>51G</td><td>22H</td></tr>
</table>

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

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

table.sample {
   border-collapse: separate; /* ※1 */
   empty-cells: hide; /* 空っぽのセルの枠線・背景を消す場合 */
}
table.sample td {
   border: 2px solid green; /* セルの枠線 */
   background-color: #ccffcc; /* セルの背景色 */
   padding: 0.5em; /* ※2 */
   font-size: 150%; /* ※2 */
   font-family: Arial,sans-serif; /* ※2 */
}

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

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

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

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

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

《2016/03/14 9:50 改訂》
《2014年6月8日 10:14 初版公開》

スタイルシートTipsの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+

関連書籍・関連ソフトなど

--- 当サイト内を検索 ---