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のブラウザ対応状況です
