「テーブル」ブロックの行と列をマウスオーバーで強調表示する方法

目的

「テーブル」ブロックの視認性を向上させるため、マウスオーバー時に行と列の背景色を変える表示を行います。
これにより、現在どのセルを選択しているのかを直感的に把握しやすくなります。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

table {
  overflow: hidden;
  position: relative;
  z-index: 0;

  td {
    position: relative;

    &:hover {
      &::before,
      &::after {
        content: '';
        position: absolute;
      }

      /* 行のハイライト */
      &::before {
        background-color: #b2ebf2;
        height: 100%;
        left: -100vw;
        top: 0;
        width: 200vw;
        z-index: -2;
      }

      /* 列のハイライト */
      &::after {
        background-color: #f0f4c3;
        height: 200vh;
        left: 0;
        mix-blend-mode: lighten;
        top: -100vh;
        width: 100%;
        z-index: -1;
      }
    }
  }
}

さいごに

今回紹介した方法を使えば、マウスオーバー時に表の行と列を強調表示でき、可読性を向上させることができます。
背景色やエフェクトをカスタマイズすることで、デザインに合わせた調整も可能です。