テーブルを複数行ごとにhoverでハイライトする方法


今の会社に入って数か月たったころ、前任者が作ったホームページのソースが分かりづらいので、新しく作り直したいという依頼を受けることになった。そのうちのいくつかのページにテーブルがあり、trごとにハイライトしているページが。どうやらJavaScriptでやっているようだったのだけれども、それを自分はCSSに書き換え。例えば以下のような感じで。

HTML

CSS

名前 ふりがな 年齢
中居正広 なかいまさひろ 39
木村拓哉 きむらたくや 39
稲垣吾郎 いながきごろう 38

しかし中には、データ数が多すぎて1セットで複数行になっているテーブルも。ソースを見てみると、どうやらtrタグの中に一つのtdタグを入れ、その中に新たにtableを入れてハイライトをつけているようだった。自分もそのやり方でいいのかと思ったら、これだと線の場所がバラバラことがあるといった問題らしいので、すべてを一つのテーブルで作ることに。いったいどうすりゃいいものか・・・。と少し考えて作ったのが下のようなもの。

HTML

CSS

名前 年齢 生年月日 血液型
ふりがな 出生地 愛称
中居正広 39 1972年8月18日 A型
なかいまさひろ 神奈川県藤沢市 中居くん
木村拓哉 39 1972年11月13日 O型
きむらたくや 東京都 キムタク
稲垣吾郎 38 1973年12月8日 O型
いながきごろう 東京都板橋区 ゴローちゃん

HTMLのテーブルにはヘッダーに該当する<thead>、フッターに該当する<tfoot>、そしてボディに該当する<tbody>の3つで構成されています。また、theadとtfootは同じテーブル内に一つしか記述してはいけないのですが、tbodyはいくつでも記述してもよいことになってるそうです。そのため、複数行をtbodyでまとめ、tbody上にマウスが乗ったらバックの色を変えるという処理をしてみました。なお、上記のタグを書かないと、tbodyと判断されます。そのため、theadタグをつけなかったら、テーブルのヘッダー部分まで色が変わってしまうので注意しましょう。

コメントを残す

メールアドレスが公開されることはありません。