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

2022-01-22 00:00:00 hover css css-tables

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

I am trying to create a table that has a rowspan, zebra effect and highlights the row on hover. I kind of got it working but not quite.

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

It should be like this: http://codepen.io/chriscoyier/pen/wLGDz plus a zebra effect on the rows. Unfortunately a zebra effect using jQuery or CSS does not work for me as the lines won't change on hover if I do that.

有什么建议吗?<代码>

推荐答案

这是 tbody 的工作.至少早在 HTML4 中就允许在一个表格中使用多个 tbody 元素，它们旨在将相关行组合在一起.这样一来，您就完全不需要 JavaScript.

This is a job for tbody. Multiple tbody elements are allowed in a table at least as far back as HTML4, and they're designed for grouping related rows together. This way, you don't need JavaScript at all.

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>

相关文章