Zebra使用CSS3分割带隐藏行的表格？ [英] Zebra striping a table with hidden rows using CSS3?
问题描述
我有一张表
< table id =mytable>
< tr style =display：none;>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr style =display：none;>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< / table>
我试图设置表条带化使用nth-子选择器，但似乎不能破解它。
table #mytable tr [@ display = block]：nth-child（odd）{
background-color： ＃000;
}
table #mytable tr [@ display = block]：nth-child（odd）{
background-color：#FFF;
}
我确定我很近...不能
>这里是接近你会得到。注意，你不能让 nth-child 只计数显示的行; nth-child 会使用 n 个子元素，无论与指定选择器相符的 。如果你想要一些行丢失，并且不影响斑马条纹，你将不得不通过DOM或在服务器端从表中删除它们。
<！DOCTYPE html>
< style>
#mytable tr：nth-child（odd）{
background-color：＃000;
}
#mytable tr：nth-child（even）{
background-color：#FFF;
}
< / style>
< table id =mytable>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< tr>< td>& nbsp;< / td>< / tr>
< / table>
以下是我所做的修正：
table #mytable tr [@ display = block]：nth-child（odd）{
background-color：＃000;
}
不需要为基于id 的选择器;只有一个元素将匹配 #table ，所以你只是通过添加 table 添加额外的代码， in。
#mytable tr [@ display = block]：nth-child（odd）{
background-color ：＃000;
}
现在， [@ display = block] code>将匹配具有 display 设置为块的元素，例如< tr display = block> 。显示不是有效的HTML属性;你似乎试图做的是让选择器匹配的元素的风格，但你不能这样做在CSS中，因为浏览器需要应用CSS的样式之前，它可以计算出来，它在它应用这个选择器的过程中。因此，您将无法选择是否显示表行。由于 nth-child 只能取第 nth-of-type ，它选择相同元素类型的第
#mytable tr：nth-child（odd）{
background-color：＃000;
}
有你的。
I've got a table
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
anyone pass along a clue?
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
</style>
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
Now, [@display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.
这篇关于Zebra使用CSS3分割带隐藏行的表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
