行と列をハイライト表示するテーブル
最後に、図4のような、行と列をハイライト表示するテーブルをスタイリングしてみましょう。さきほどの例では、列の背景色と行のハイライト色が乗算されるように設定しましたが、今回のサンプルでは、行も列もハイライト表示させます。
col要素で縦列をマークアップする
HTMLは次のようになります。tableに「zebra」というIDを付け、縦列はcol要素を5列分の5個配置してマークアップしています。
<table id="zebra">
<caption>都道府県と県庁所在地</caption>
<colgroup id="no">
<col /><col /><col /><col /><col />
</colgroup>
<thead>
<tr>
<th>コード</th><th>都道府県名</th><th>ふりがな</th><th>県庁所在地</th><th>ふりがな</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td><td>北海道</td><td>ほっかいどう</td><td>札幌市</td><td>さっぽろし</td>
</tr>
～中略～
</tbody>
</table>
テーブルの背景の概念
さきほどのサンプルでは、列に対して行のハイライトであったため、「tr:hover」で簡単にハイライト色を乗算させることができました。今回のサンプルは「tr:nth-child(even)」で、偶数行ごとに背景色を付けたゼブラテーブルにしていますが、この行に対してもハイライト色を乗算させたいので、「tr:hover」を使うことができません。これを使うとホバー時のスタイルが優先され、ゼブラの背景色のスタイルは無効になるからです。
ここで、テーブルの背景の概念を確認しておきましょう。テーブルの背景は、図5のように上から「セル、行、行グループ、列、列グループ、テーブル」の順でレイヤーになっていると考えてください。
jQueryの利用
話を戻して、サンプルでは、「tr:nth-child(even)」で偶数行に背景色を付けたので、ホバー時に色を乗算させたい場合は、行の上のセル、つまりtdに背景色を付ける必要があります。横一行なので、その行のtdすべてが対象になります。また、colgroupやcol要素は「:hover擬似クラス」が効かないため、列のハイライト表示も他の方法を考える必要があります。そこで、jQueryで次のような機能を付けてみました。
- カーソルが乗ったセル（td）に「on」というクラス名を付ける
- カーソルが乗ったセルと兄弟要素のセルに「hover」というクラス名を付ける
- カーソルが乗ったセルが何番目のセルかを取得し、同じ順番にあるcol要素に「hover」というクラス名を付ける
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script stype="text/javascript">
$(function(){
$('#zebra td').hover(function() {
$(this).toggleClass('on');
$(this).siblings().toggleClass('hover');
$('#zebra col:eq('+$(this).index()+')').toggleClass('hover');
});
});
</script>
あとは、CSSでそれぞれのクラスに対し背景色を指定するだけです。ここでは偶数行に薄いブルー、ハイライトにイエローを指定しました。rgba()で半透明を設定しているので、偶数行にカーソルが乗った場合は、色が乗算されてグリーンっぽくなります。
tbody tr:nth-child(even){ /*偶数行の色 */
background-color: rgba(204,255,255,0.5);
}
col.hover, td.hover{ /* 列と行（のセルすべて）のハイライト */
background-color: rgba(255,255,102, 0.3);
}
td.on{ /* カーソルの乗ったセル */
background-color: rgba(255,255,102,0.5);
}
まとめ
本記事では、テーブルの列をスタイリングする際に覚えておくと良いポイントを紹介しました。colgroupとcol要素は、使えるプロパティが限定的ですが、CSS3のセレクタやjQueryと合わせて使うことで、スタイルを適用できることがお分かりいただけたと思います。
次回は、CSSを使ったフォームのスタイリング方法をご紹介します。
