表行跨度哈弗和斑马效应(Table with Rowspan Hover and Zebra eff

我试图创建一个具有行跨度，斑马效应，并强调对悬停的行的表。 我种了它的工作，但不完全是。

它应该是这样的： http://codepen.io/chriscoyier/pen/wLGDz再加上排斑马效应。 不幸的是使用jQuery或CSS斑马效应不为我工作作为线路将不会改变悬停，如果我这样做。

有什么建议？

Answer 1:

像这样的事情？

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

基本上，这样做的：

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

和

.hover {
   background: red !important; 
}

Answer 2:

这是一个工作tbody 。 多TBODY元素在表中允许至少早在HTML4，他们正在设计相关的行组合在一起。 这样一来，你就根本不需要的JavaScript。

http://codepen.io/cimmanon/pen/KqoCs

<table>
    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS的：

body {
  padding: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
   padding: 20px;
  border: 1px solid black;
}

tbody:nth-child(odd) {
  background: #CCC;
}

tbody:hover td[rowspan], tr:hover td {
   background: red; 
}

Answer 3:

就像是：

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

应该管用。 发布您的代码了。

文章来源: Table with Rowspan Hover and Zebra effect