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()的性质有关，tr纯粹基于作为其父级的第n个子元素的元素以及CSS's lack of a parent selector选择（您不能仅选择td[rowspan]如果它不包含:has()，例如）。

jQuery确实拥有CSS缺少的:even选择器，您可以将其与:odd结合使用（不是:nth-child()，因为它是0索引而不是$('tr:not(:has(td[rowspan])):even')' s 1-index）用于过滤作为CSS的替代：

{{1}}

jsFiddle preview

Answer 3

我有一个类似的问题，我只是在TD内部的背景上覆盖行背景。根据您的预期结果，这也适用于您？

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

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

Answer 4

尝试按tbody分隔表格，例如：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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>

Answer 7

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

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

7 个答案: