如何使用nth-child对具有行span的表进行样式化?

I have a table that has one row that uses rowspan. So,

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

I'd like to use the nth-child pseudo-class to add a background color to every other row, but the rowspan is messing it up; it adds the background color to the row below the row with the rowspan, when in fact I'd like it to skip that row, and move onto the next.

我想使用nth-child伪类为每一行添加一个背景颜色，但是行span把它搞砸了;它用行间距将背景色添加到行下面的行中，而实际上我希望它跳过这一行，然后移动到下一行。

Is there a way to get nth-child to do something smart, or to use [rowspan] in the selector to get around this? So in this case, I'd like the background color to be on rows 1 and 4 but then after that on 6, 8, 10, and so on (since none of those have rowspans)? It's like if I see a rowspan, then I want nth-child to add 1 to n and then continue.

是否有办法让nth-child做一些聪明的事情，或者在选择器中使用[rowspan]来解决这个问题?在这种情况下，我希望背景色在第1行和第4行，然后在第6行、第8行、第10行等等(因为它们都没有行span)上?就像如果我看到一个行空间，那么我想让nth-child加上1到n，然后继续。

Probably no solution to this, but thought I'd ask :-)

可能没有办法解决这个问题，但我想问:

6 个解决方案

#1

Unfortunately, there's no way to do this with :nth-child() alone, or by using CSS selectors alone for that matter. This has to do with the nature of :nth-child() which selects purely based on an element being the nth child of its parent, as well as with CSS's lack of a parent selector (you can't select a tr only if it doesn't contain a td[rowspan], for example).

不幸的是，没有办法只使用nth-child()，或者只使用CSS选择器。这与nth-child()的性质有关，它选择纯粹基于元素作为其父元素的第n个元素，以及CSS缺少一个父选择器(例如，只有在不包含td[rowspan]的情况下，才可以选择tr)。

jQuery does have the :has() selector that CSS lacks, though, which you can use in conjunction with :even (not :odd as it's 0-indexed versus :nth-child()'s 1-index) for filtering as an alternative to CSS:

但是，jQuery确实有CSS缺少的:has()选择器，您可以结合使用:even(不是:奇数，因为它是0索引的，而不是:nth-child()的1-index)，作为CSS的替代选择:

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

jsFiddle preview

jsFiddle预览

#2

What seems to work for me is to put a td in the row below with display:none

对我来说，最重要的是把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>

#3

I had a similar issue and I just overrode the row background with backgrounds on the TD's inside of them. Depending on your desired outcome, this may work for you too?

我也遇到过类似的问题，我只是重写了带有TD背景的行背景。取决于你想要的结果，这可能对你也有用吗?

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

Of course you can override other rows like headers, etc with a class or th.

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

#4

Try to separate table by tbody, something like:

试着把桌子分开，比如:

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

I used a combination of previous answer to add tr's with display=none programatically:

我结合之前的答案添加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])');

See the JSfiddle.

看到JSfiddle。

#6

You can do this using only CSS if you're willing to add some additional markup. Wrap every "group" of rows in a <tbody> tag. Then add a background color to every odd tbody.

如果您愿意添加一些额外的标记，那么只能使用CSS。在标记中包装每一行的“组”。然后在每个奇怪的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>

#1