Html 如何使用 nth-child 为带有 rowspan 的表格设置样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10200997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use nth-child for styling with a table with rowspan?
提问by Elisabeth
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 伪类为每隔一行添加背景色，但是 rowspan 搞砸了；它将背景颜色添加到具有 rowspan 的行下方的行，而实际上我希望它跳过该行，然后移动到下一行。
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 行等（因为这些都没有行跨度）？就像如果我看到一个行跨度，那么我希望第 n 个孩子将 1 添加到 n 然后继续。
Probably no solution to this, but thought I'd ask :-)
可能没有解决方案，但我想我会问:-)
采纳答案by BoltClock
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 tronly if it doesn't contain a td[rowspan], for example).
不幸的是，没有办法:nth-child()单独或单独使用 CSS 选择器来做到这一点。这与:nth-child()纯粹基于元素是其父元素的第 n 个子元素进行选择的性质有关，以及CSS 缺少父选择器（tr只有当它不包含 a 时才能选择a td[rowspan]，因为例子）。
jQuery does have the :has()selector that CSS lacks, though, which you can use in conjunction with :even(not :oddas it's 0-indexed versus :nth-child()'s 1-index) for filtering as an alternative to CSS:
不过，jQuery 确实具有:has()CSS 缺少的选择器，您可以将其与:even（不是:odd因为它是 0-indexed 与:nth-child()'s 1-index）结合使用，作为 CSS 的替代品进行过滤：
$('tr:not(:has(td[rowspan])):even')
回答by Sebastian Forster
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>
回答by Chris
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 覆盖其他行，如标题等。
回答by vitalii97
Try to separate table by tbody, something like:
尝试按 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>
回答by hhh
I used a combination of previous answer to add tr's with display=noneprogramatically:
我使用先前答案的组合tr以display=none编程方式添加's ：
HTML
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
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。
回答by Steven Liekens
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。
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>