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

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

スタイルシートのempty-cellsプロパティを使えば、「空っぽのセル」の枠線や背景を描画するかどうかを指定できます。

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

ウェブ上でテーブル(表)を使う場合に、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ソース(テーブル部分):

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ソース(空っぽのセルの枠線・背景を消す場合):

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で斜線を引く方法


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

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

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

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