带有Rowspan悬停和斑马线效果的表格

Question

我想创建一个具有行合并、斑马线效果和悬停高亮的表格。虽然我差不多实现了它，但还没有完全成功。

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

有什么建议吗？

- rhslogic

---

你可以使用Bootstrap，因为它已经内置了所有内容：http://twitter.github.com/bootstrap/base-css.html#tables - Billy Moat

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>

- cimmanon

---

tksss 'tbody:hover td[rowspan], tr:hover td { background: red; }'tksss 'tbody:hover td[rowspan], tr:hover td { background: red; }' - Fábio Zangirolami

像魔法一样运作。 - Y.G.J

你是一个天使吗？ - Ynot

如果您将鼠标悬停在 b 或 c 行并移动到第一个 td，它会自动悬停在 a 行。在这种情况下是否可能使其保持在 b/c 上？ - nikname

Answer 2

类似这样：

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

应该可以工作。请把你的代码发布上来。

- Bob