Skip to content

burnworks/table-hover-highlighting-css

Repository files navigation

table highlighting with CSS :has()

table のセルを :hover したり、セル内の要素に :focus したときに、そのセルをわかりやすくハイライト表示する CSS のサンプルを紹介しています。

src/styles/styles.css

スタイルは上記のファイルにまとまっています。

Tailwind CSS を使用しているため @apply 以降の指定は実際のプロパティと値に読みかえてください。

通常の CSS にしたものを下記に入れてあります。参考まで。

css-sample/styles.css

なお、サンプルの CSS は、同じくサンプルで使用している table の構造(例えば theadtbody 要素の使い方、行や列の数など)が前提で書かれています。

table の構造を大きく変えると、CSS もそれに合わせて書き換えないといけませんので注意してください。

また、フォーカス時の動作に関しては、下記のデモだとセル内にフォーカス可能な要素を置いていないため確認できません。

お手元で、例えば buttona 要素など、フォーカスを受け取る要素を td 内に入れて確認してみてください。

CSS 上では :focus-within に対するスタイルも指定してあるので、セル内の要素がフォーカスを受け取れば、:hover 同様にハイライト処理がされます。

デモ

謝辞

以下の X ポストからヒントをいただきました。

About

:hover や :focus でセルをわかりやすくハイライトする CSS のサンプル

Resources

Stars

Watchers

Forks

Contributors 2

  •  
  •