如何使用nth-child与带有rowspan的表进行样式设计？

Question

我有一个表,有一行使用rowspan.所以,

<table>
 <tr>
  <td>...</td><td>...</td><td>...</td>
 </tr>
 <tr>
  <td rowspan="2">...</td><td>...</td><td>...</td>
 </tr>
 <tr>
              <td>...</td><td>...</td>
 </tr>
 <tr>
  <td>...</td><td>...</td><td>...</td>
 </tr>
</table>

我想使用nth-child伪类为每隔一行添加一个背景颜色,但是rowspan正在弄乱它; 它将行背景颜色添加到行下方的行中,实际上我希望它跳过该行,然后移动到下一行.

有没有办法让nth-child做一些聪明的事情,或者在选择器中使用[rowspan]来解决这个问题？所以在这种情况下,我希望背景颜色在第1行和第4行,但之后在6,8,10等等(因为这些都没有行间盘)？就像我看到一个rowspan一样,然后我希望nth-child将n加1,然后继续.

可能没有解决方案,但我想问:-)

Answer 1

对我来说似乎有用的是在下面的行中添加一个td,显示:none

<table>
   <tr>
      <td rowspan="2">2 rows</td>
      <td>1 row</td>
   </tr>
   <tr>
      <td style="display:none"></td>
      <td>1 row</td>
   </tr>
</table>

Answer 2

不幸的是,没有办法:nth-child()单独使用,或者单独使用CSS选择器.这与:nth-child()纯粹基于作为其父级的第n个子元素的元素的选择有关,以及CSS缺少父选择器(tr如果它不包含a td[rowspan],则不能选择,例).

但是,jQuery确实有:has()CSS缺少的选择器,你可以将它与:even(不是:odd0索引与:nth-child()1索引)一起用作过滤作为CSS的替代:

$('tr:not(:has(td[rowspan])):even')

jsFiddle预览

Answer 3

我有一个类似的问题，我只是覆盖了行背景，里面有 TD 的背景。根据您想要的结果，这也可能对您有用吗？

tr:nth-child(odd) {
    background: #DDE;
}
tr:nth-child(odd) td[rowspan] {
    background: #FFF;
}

当然，您可以使用类或 th 覆盖其他行，如标题等。