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

Posted 2023-05-08

【中文标题】具有 Rowspan 悬停和斑马效果的表格

【英文标题】：Table with Rowspan Hover and Zebra effect

【发布时间】：2013-03-06 01:57:26

【问题描述】：

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

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

有什么建议吗？

【问题讨论】：

你可以使用 Bootstrap，因为它是内置的：twitter.github.com/bootstrap/base-css.html#tables

【参考方案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>

【讨论】：

tksss 'tbody:hover td[rowspan], tr:hover td 背景：红色; '

像魅力一样工作

你是天使吗？

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

【参考方案2】：

类似：

// stripe
tr:nth-child(even) 
    background-color: #ccc;

// hover
tr:hover 
     background-color: #c00;

应该可以。发布您的代码。