如何使用 nth-child 对具有行跨度的表格进行样式设置？答案

【问题标题】：How to use nth-child for styling with a table with rowspan?如何使用 nth-child 对具有行跨度的表格进行样式设置？
【发布时间】：2012-04-29 08:51:33
【问题描述】：

我有一个表，其中一行使用行跨度。所以，

<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 伪类为每隔一行添加背景颜色，但是行跨度搞砸了；它将背景颜色添加到具有行跨度的行下方的行中，而实际上我希望它跳过该行并移至下一行。

有没有办法让 nth-child 做一些聪明的事情，或者在选择器中使用 [rowspan] 来解决这个问题？因此，在这种情况下，我希望背景颜色位于第 1 行和第 4 行，但之后位于第 6、8、10 行等等（因为这些都没有行跨度）？这就像如果我看到一个行跨度，那么我希望 nth-child 将 1 添加到 n 然后继续。

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

不幸的是，单独使用 :nth-child() 或单独使用 CSS 选择器无法做到这一点。这与 :nth-child() 的性质有关，它纯粹基于作为其父元素的第 n 个子元素进行选择，以及与 CSS's lack of a parent selector （您不能选择 tr 仅当它不包含td[rowspan]，例如）。

jQuery 确实有 CSS 缺少的 :has() 选择器，但是您可以将其与 :even 结合使用（不是 :odd，因为它是 0 索引而不是 :nth-child() 的 1 索引）过滤为CSS 的替代方案：

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

jsFiddle preview

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

似乎对我有用的是在下面的行中添加一个 td 并带有 display: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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

如果您在示例中仅在第一列中使用 rowspan，您也可以通过使用 nth-last-child(even) 来解决问题

【讨论】：