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

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

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

4

7 回答 7

44

似乎对我有用的是在下面的行中放置一个 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>
于 2013-10-25T12:56:09.517 回答
18

不幸的是，没有办法:nth-child()单独使用，或者单独使用 CSS 选择器。这与它的性质有关，:nth-child()它的选择纯粹基于一个元素是其父元素的第 n 个子元素，以及CSS 缺少父选择器tr（只有当它不包含 a时，你才能选择a td[rowspan]，因为例子）。

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

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

jsFiddle 预览

于 2012-04-18T00:21:53.553 回答
5

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

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

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

于 2013-03-06T23:52:24.670 回答
3

尝试按 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>

于 2014-12-20T10:25:12.187 回答
2

如果你愿意添加一些额外的标记，你可以只使用 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>

于 2016-08-25T11:37:40.180 回答
0

我结合使用以前的答案以编程方式添加tr's ：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;
}

查询

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

请参阅JSfiddle。

于 2015-10-12T15:34:34.303 回答
0

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

于 2021-05-06T12:21:10.310 回答