Question

我正在尝试创建一个具有rowspan，斑马效果的表格，并在悬停时突出显示该行。我有点工作，但并不完全。

它应该是这样的：http://codepen.io/chriscoyier/pen/wLGDz加上对行的斑马效应。不幸的是，使用jQuery或CSS的斑马效果对我来说不起作用，因为如果我这样做，线条在悬停时不会改变。

有什么建议吗？

Answer 1

这是tbody的工作。表格中允许多个tbody元素至少与HTML4一样，并且它们被设计用于将相关行分组在一起。这样，您根本不需要JavaScript。

<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 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; 
}

表与Rowspan悬停和斑马效果

3 个答案: