HTML:表格rowspan跨行時的hover效果

本文轉載自

http://jo2.org/html-rowspan-tr-hover/
主題: HTML:表格rowspan跨行時的hover效果

原文如下

rowspan跨行是table的一個很正常的需求,而tr的hover效果更是普遍。但既有rowspan又需要行的hover效果時,往往看到的就是這樣:

簡直不能忍!!

前幾天碰到這問題時,我本打算寫些JS代碼來解決,但寫起來比較複雜,雖然後面我想到了一種相對簡單的思路,但需要html本身可控(就是html啥樣可以由你決定),不適合大部分情況。

後來我覺得,這樣一個顯著的問題,不可能前人沒有碰到過。於是用Google搜索之,果然。

解決思路很簡單,我甚至不需要給大家列舉代碼,只口述即可。

table中支持多個tbody!這是實現跨行hover效果的關鍵,所以我們的解決辦法是:把rowspan的多個相關行,用一個tbody包起來,然後設置tbody:hover的效果即可。

甚至以前的tr:hover效果你可以不管,只給相應tbody加上相同hover效果即可。

目測連IE7都兼容

所以,養成自覺加thead/tbody的習慣是不錯的。-完-

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章