如何使用第n个孩子与行跨度的表格样式？如何使用第n个孩子与行跨度的表格样式？(How to use

我有一个具有使用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>

我想使用的第n个孩子伪类的背景颜色添加到每隔一行，但行跨度是搞乱起来; 它增加了背景颜色与行跨度行下面的行的时候，其实我想它跳过该行，并移动到下一个。

有没有办法让第n个孩子做一些聪明的，或者在选择使用[行跨度]来解决这个问题？ 因此，在这种情况下，我想的背景色是对行1和4，但在此之后，关于6，8，10，等等（因为无那些具有rowspans）？ 这就像如果我看到一个行跨度，那么我想第n个孩子加1到n，然后继续。

大概没有解决这一点，但认为我会问:-)

Answer 1:

不幸的是，没有办法用做到这一点:nth-child()独自一人，或单独使用CSS选择对这一问题。 这与大自然做:nth-child()其选择基于纯粹的元素是其父的第n个孩子上，以及与CSS缺乏父母选择的 （你不能选择tr只有当它不包含一个td[rowspan] ，例如）。

---

jQuery也有:has()选择器，CSS缺乏，不过，你可以结合使用:even （不:odd ，因为它是0索引的对比:nth-child()的1 -指数）过滤作为替代CSS：

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

的jsfiddle预览

Answer 2:

什么似乎为我的工作是把TD排在下面显示：无

<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 3:

我有一个类似的问题，我只是推翻了行背景与对TD的人里面的背景。 根据您想要的结果，这可能会为你工作了？

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

当然你也可以覆盖其他行类似的报头，用等类或日。

Answer 4:

尝试通过TBODY单独的表，是这样的：

 tbody tr:nth-child(odd){ background: #00FFFF; } tbody tr:nth-child(even){ background: #FF0000; } tbody:nth-child(odd) td[rowspan]{ background: #00FFFF; } tbody:nth-child(even) td[rowspan]{ background: #FF0000; } 

 <table> <tbody> <tr> <td rowspan="4">...</td> <td>...</td> <td>...</td> <td rowspan="4">...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td rowspan="3">...</td> <td>...</td> <td>...</td> <td rowspan="3">...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </tbody> </table> 

Answer 5:

我用以前的答案的组合来添加tr与的display=none编程：

HTML

  <table>
  <tr>
    <td>A</td>
    <td>B</td> 
    <td>C</td>
  </tr>
  <tr>
    <td rowspan=2>1</td>
    <td rowspan=2>2</td>
     <td>sub C 1</td>
  </tr>
  <tr>
    <td>sub C 2</td> 
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

CSS

table tr:nth-child(2n) {
  background-color: #F8ECE0;
}

JQUERY

$( "<tr style='display:none'></tr>" ).insertAfter('tbody tr:has(td[rowspan])');

见的jsfiddle 。

Answer 6:

如果你愿意增加一些额外的标记，你可以做到这一点只用CSS。 包裹在一个行的每一个“基团” <tbody>标记。 然后添加一个背景色为每个奇数tbody 。

 tbody:nth-child(odd) { background-color: yellow; } 

 <table> <tbody> <tr> <td>tr 1</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">tr 2+3</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 4</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 5</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 6</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 7</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 8</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 9</td> <td>...</td> <td>...</td> </tr> </tbody> <tbody> <tr> <td>tr 10</td> <td>...</td> <td>...</td> </tr> </tbody> </table> 

文章来源: How to use nth-child for styling with a table with rowspan?