《 09:50 公開/更新》
スタイルシートの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」を指定したことになります。
古いブラウザの互換モード(=ウェブページが非標準な文法で記述されている場合に使われる表示モード)で閲覧した場合は、以下のような表示になりました。
互換モードで描画されるようなページでも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
< 旧 / 新 >
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)