9

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

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

有什么建议么？

4

2 回答 2

51

这是一份工作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>

于 2013-03-17T19:09:42.743 回答
-2

就像是：

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

应该管用。把你的代码贴出来。

于 2013-03-17T18:59:50.357 回答