CSS : テーブルにhoverで縦横ハイライトする

CSSだけでテーブルの列（縦）もハイライトさせる

サンプルはこちら。

See the Pen Cross Highlight Table by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

行（横）をハイライトするのは簡単ですが、列（縦）をハイライトするには少し工夫が要ります。JSを使うケースも多いですが、今回はCSSだけで実現する方法を紹介します。

解説

HTML

<table class="cross-highlight">
  <tr>
    <th></th>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
    <th>列4</th>
    <th>列5</th>
  </tr>
  <tr>
    <th>行1</th>
    <td>セル1-1</td>
    <td>セル1-2</td>
    <td>セル1-3</td>
    <td>セル1-4</td>
    <td>セル1-5</td>
  </tr>
  〜
</table>

HTMLはごく普通のテーブルです。
.cross-highlightというクラスをテーブルに適用しています。

CSS

部分ごとに順を追って説明します。

.cross-highlight {
  border-spacing: 0;
  border-collapse: collapse;
  border: solid 1px #666;
  overflow: hidden;
}

テーブルに適用する .cross-highlight を定義します。
ここの要は overflow: hidden です。

.cross-highlight tr:hover {
  background-color: #f0f0f0;
}

<tr>タグにカーソルを乗せたら行全体の背景色が変わるようにします。
行だけハイライトさせるならこれで終わりなので簡単ですね。

.cross-highlight td, .cross-highlight th {
  padding: 15px;
  position: relative;
}

<th>タグ、<td>タグでマス一つごとへの定義です。
position: relativeが要です。

.cross-highlight td:hover {
  background-color: #ccc;
}

<td>にカーソルが乗った時の色を設定します。
行や列の色より濃い色を設定することで、色が重なっているように見せます。

.cross-highlight td:hover:after {
  content: "";
  background-color: #f0f0f0;
  width: 100%;
  height: 200vh;
  position: absolute;
  top: -100vh;
  left: 0;
  z-index: -1;
}

上記が今回一番重要な部分です。

td:hover:afterで、<td>タグにカーソルが乗った時に超縦長の長方形を出現させています。 positionを調整しテーブルの後ろに縦長の長方形を配置することで、縦一列に背景色が付いているように見せています。 テーブル自体にoverflow:hiddenをかけているので棒が突き抜けることもありません。

CSSをまとめると以下になります。

.cross-highlight {
  border-spacing: 0;
  border-collapse: collapse;
  border: solid 1px #666;
  overflow: hidden;
}
.cross-highlight tr:hover {
  background-color: #f0f0f0;
}
.cross-highlight td, .cross-highlight th {
  padding: 15px;
  position: relative;
}
.cross-highlight td:hover {
  background-color: #ccc;
}
.cross-highlight td:hover:after {
  content: "";
  background-color: #f0f0f0;
  width: 100%;
  height: 200vh;
  position: absolute;
  top: -100vh;
  left: 0;
  z-index: -1;
}

補足

バグか仕様か不明ですが、背景色の指定に rgba(0,0,0,0.1)の形式を使うとテーブルが透過されなくなり、 td:hover:after の縦長オブジェが隠されて縦一列に色が付かなくなってしまいます。 縦長オブジェクトだけでなく同じテーブルのどこかで使われていると隠されてしまいます。 初歩的な16進指定のみ使いましょう。