CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる

https://ift.tt/317oJ9i

Result

こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです

CSSだけで実装しています

css

table {
  overflow: hidden;
  display: inline-block;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #999;
  margin: 0;
  padding: 10px;
  position: relative;
}

th {
  background-color: #fff;
}

td:hover::before {
  background-color: red;
  content: "";
  height: 100%;
  left: -5000px;
  position: absolute;
  top: 0;
  width: 10000px;
  z-index: -2;
}

td:hover::after {
  background-color: green;
  content: "";
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  mix-blend-mode: lighten;
  width: 100%;
  z-index: -1;
}

列と行のハイライトは疑似要素で、重なっているセルはblend-modeにしています
色は分かりやすい色にしてるので便宜変更してください

やや強引な方法なのでもう少しスマートにしたいところです

html

<table>
    <tr>
      <th>Size</th>
      <th>xxs</th>
      <th>xs</th>
      <th>s</th>
      <th>m</th>
      <th>l</th>
      <th>xl</th>
    </tr>
　　　・
　　　・
　　　・
</table>

can i use

mix-blend-modeのブラウザ対応状況です

via

Pure CSS Table Column Hover

@memo

web情報

https://ift.tt/2IMwknh
via かちびと.net http://kachibito.net

October 13, 2019 at 10:20AM https://ift.tt/2IMwknh