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

2017-08-24_00h03_35 ガジェット総合
Result
See the Pen Pure CSS Table Column Hover by kachibito
(@kachibito) on CodePen.
こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです
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:hove

リンク元

コメント

タイトルとURLをコピーしました