本文轉載自
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的習慣是不錯的。-完-