【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

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。

CSS

まとめ

Author Profile

Latest entries

この記事を読んだ人にオススメ！

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