tableのレイアウトをいろいろ弄ってみる(2)

引き続きtable+floatで色々遊んでみた．もともとtable要素自体がとてもいい形をしているので，工夫次第でいろんなことが出来るなぁ．

ホバーで行が浮き出る

hover擬似要素と合わせると動きが出せる．行の位置をずらせるので，このような効果を出せる．

1	2	3	4
1	2	3	4
1	2	3	4
2
3
4
5

ホバーしている行の詳細が右側に表示される

単なるテーブルとcssだけでここまでカスタマイズ可能ってのを実証してみた．チェックを外すとスタイルが解消されるので，その動作を確認して下さい．背景画像を用意するともっと見栄えのよいものが作れそうな気がする．
本当ならhoverじゃなくてクリックした行が選択状態になるのがベストなんだけれどそうなるともう少し細工が必要となりそう．