【CSS】CSSだけでテーブルの縦横ラインをハイライトするCSSサンプル

See the Pen ZYgRzW by Tsukasa Nagata (@nt-uni) on CodePen.0

今回は上記のようなCSSだけでテーブルの縦横ラインをハイライトするCSSをご紹介します。

CSS

table {
    overflow: hidden;
}

tr:hover {
    background-color: #ffa;
}

td, th {
    position: relative;
}
td:hover::after,
th:hover::after {
    content: "";
    position: absolute;
    background-color: #ffa;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

ざっと見て行きましょう。

tr:hover {
    background-color: #ffa;
}

ここで横列がハイライトうけるのはOKですね。

td:hover::after,
th:hover::after {
    ほにゃらら
}

ちなみに::afterとコロンを重ねるのはCSS3構文となり、擬似クラス擬似要素の見分けをはっきりさせるために導入されました

:hover::afterでは、高さが10000pxの要素をtop: -5000pxにもっていき、なが~いbackground-colorを引くわけです。そしてz-index: -1で後ろにもっていきます。

そのままだとはみ出してしまうため、

table {
    overflow: hidden;
}

となっているわけです。

まとめ

簡単なCSSなので解説もあまり必要ありませんでしたね。
それよりも途中の解説文でCSS構文が文章の間に間に入ってきたため、なんだかルー語みたいになってしまいました。

失礼。

参考サイト:
Simple CSS-Only Row and Column Highlighting | CSS-Tricks

フォローして続編をチェック

@universionsをフォロー