Javascript CSS备用行-某些行隐藏

我正在尝试设计一张桌子，使每一行都有不同的颜色（奇数/偶数）。我有以下CSS：

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

---

但是，我的一些行可以隐藏，我仍然希望这些行可以交替。我如何调整上述参数，使其显示交替行的外观，即使相邻的行不一定是奇数或偶数？

如果使用jQuery，可以使用其函数之一，例如，仅选择可见的元素。但是这里的关键是CSS选择器

：可见

例如（见）：

这是一个很难解决的问题，我只是花了一段时间玩CSS2和3选择器，我不确定我们是否已经做到了。这样的事情应该是可能的，但不起作用：

tr td {background-color:white;}
tr td:not([style="display:none"]):nth-of-type(even) {
    background-color:#f0f9ff;
}

<tr><td>1</td></tr>
<tr><td style="display:none">2</td></tr>
<tr><td>3</td></tr>

trtd{背景色：白色；}
tr td:not（[style=“display:none”]）：类型的第n个（偶数）{
背景色：#f0f9ff；
}
1.
2.
3.

似乎您一直在使用jQuery的
：visible
扩展（不是本机CSS），但是如果它运行缓慢，则一定要按照@Ionut所说的那样对行进行分页。
因为“缺少条带现象”只会在隐藏了奇数的行时发生，如果隐藏奇数行，则可以添加一个不可见的填充行

Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5

这是否是一个好的解决方案在很大程度上取决于您当前的代码，例如，如何创建表以及如何隐藏行

但是，如果您的表很大，并且隐藏了大量连续行，那么这将比Javascript/jQuery解决方案的性能要好得多。
我意识到这太晚了，但今天我遇到了同样的问题，并提出了一个纯CSS解决方案，它使用了
第n个child
公式。我不知道它是否适合您的具体场景，但如果其他行都隐藏了，但您仍然需要将可见行交替使用颜色，这将非常有效。CSS选择器如下所示：

tr:n第n个子（4n-1）{背景色：灰色；}

在行动中展示它

这会使其他可见行变为灰色。有关这些公式如何工作的更多信息，请参见。
我使用由两种可选颜色组成的表格背景图像解决了此问题。这使得CSS解决方案不够完整，因为它涉及到创建一个图像，但对于具有数千个条目的表来说，它应该可以很好地扩展

下面base64编码中的背景图像是1x50图像，顶部25个像素作为一种颜色，底部25个像素作为备用颜色


表格{
边界塌陷：塌陷；
背景图片：url（数据：image/png；base64，ivborw0kggoaaansuheugaaaaaaaaaycaaaaaastmsbdaaaacxbiwxmaaastaaaleweampwyaaaab3rjtuuh3wqbatassxhciwaaabl0rvh0q29tbwwwwvudcdcmvhdgvkihdpdgggr0lnufebdhcaaaaaysurbvajxy/j8/jotawmdtfgxdgxdgzdpbqqcatuqf2ze0vigaaaasu5cyii=）；
}
运输署{
填充物：2px4px；
高度：21px；
}

动物
烧杯
本生蜜露博士。
卡米拉鸡
朱利叶斯博士
牙博士
弗洛伊德胡椒粉
极不寻常的
珍妮丝
猪小姐皮吉
里佐
青蛙罗宾
老鹰山姆
斯塔特勒
瑞典厨师
华尔道夫
佐特
这个问题可能有点老了，但在寻找解决方案的时候，我来到这里，灵感来自于我使用了一个重复的线性渐变背景图像，得到了一个纯粹基于css的解决方案：

tbody {
    background-image: repeating-linear-gradient(grey 0 2em, white 2em 4em);
}
tr {
    height: 2em;
}

唯一的缺点是，您必须为表行指定一个高度（并在渐变定义中输入相同的值）

编辑：
仅当所有行具有相同高度时，此选项才有效。遗憾的是，“最大高度”不适用于表行。我有两个半生不熟的解决方案：

通过应用
tr{white space:nowrap；}
防止文本换行-仍需注意非文本元素，溢出也可能成为一个问题


使用另一个元素（如
包装
内容，并应用
div{max height:2em；}
）-这需要更改HTML，还需要处理溢出


我用“display:none”隐藏行。只是简单地说一下：真的需要有上千行吗？你不能使用分页？我确实试过了，但随着我的表越来越大，它总是被添加到其中，这似乎使firefox陷入停顿，因此我寻找一个纯粹的CSS“修复”，看看是否可以减轻我页面上的JS负担。正如我所说，这里的关键是CSS选择器，但它可能不适用于不推荐使用的浏览器，如旧版IE（请测试它是否适用于您想要支持的浏览器）。如果纯CSS唯一的解决方案不能满足您，只剩下一个是由JS添加特定的类（可能改变我的解决方案）。不错的想法，但它不起作用，因为<代码>第n类的不考虑任何其他选择器，而只考虑元素类型。（在XML语言中，它将是节点名）也许有一天我们会有第n个选择器匹配（selector match）
selector:）这个答案在我的情况下是最好的。一些行可以变得可见，但我不希望它们包含在背景颜色更改中，因此这比jquery:visible解决方案对我来说效果更好。谢谢这仅在每第二行隐藏时有效，但如果您使用的过滤器导致随机行被隐藏，则此代码不再有效。@narfie-这就是为什么我声明如果每第二行隐藏，并建议它可能不适合确切的场景。不确定是否值得投反对票，但“_(ツ)_
tbody {
    background-image: repeating-linear-gradient(grey 0 2em, white 2em 4em);
}
tr {
    height: 2em;
}