具有 Rowspan 懸停和斑馬效果的表格

Question

我正在嘗試創建一個具有行跨度、斑馬紋效果並在懸停時突出顯示該行的表格。 我有點讓它工作但不完全。

它應該是這樣的： http : //codepen.io/chriscoyier/pen/wLGDz加上行上的斑馬效果。 不幸的是，使用 jQuery 或 CSS 的斑馬效果對我不起作用，因為如果我這樣做，線條在懸停時不會改變。

有什么建議么？

Answer 1

這是tbody的工作。 至少早在 HTML4 中，表格中就允許有多個 tbody 元素，它們旨在將相關行組合在一起。 這樣，您根本不需要 JavaScript。

 body { padding: 1em; } table { width: 100%; border-collapse: collapse; } td, th { padding: .25em; border: 1px solid black; } tbody:nth-child(odd) { background: #CCC; } tbody:hover td[rowspan], tr:hover td { background: red; }

 <table> <tbody> <tr> <td rowspan="3"></td> <td>a</td> <td></td> <td></td> </tr> <tr> <td>b</td> <td></td> <td></td> </tr> <tr> <td>c</td> <td></td> <td></td> </tr> </tbody> <tbody> <tr> <td rowspan="3"></td> <td>a</td> <td></td> <td></td> </tr> <tr> <td>b</td> <td></td> <td></td> </tr> <tr> <td>c</td> <td></td> <td></td> </tr> </tbody> <tbody> <tr> <td rowspan="3"></td> <td>a</td> <td></td> <td></td> </tr> <tr> <td>b</td> <td></td> <td></td> </tr> <tr> <td>c</td> <td></td> <td></td> </tr> </tbody> </table>

Answer 2

就像是：

// stripe
tr:nth-child(even) {
    background-color: #ccc;
}
// hover
tr:hover {
     background-color: #c00;
}

應該管用。 把你的代碼貼出來。

Answer 3

像這樣的東西？

http://codepen.io/anon/pen/gcBlH

基本上，做：

$("tr :even").css('background', '#ccc')

和

.hover {
   background: red !important; 
}