CSS Alternate Rows - 隐藏了一些行

Question

我正在尝试设置一个表格,以便每一行都是不同的颜色(奇数/偶数).我有以下CSS:

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

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

但是,我的一些行可以隐藏,我仍然希望行交替.如何调整上面所以它给出了备用行的外观,即使彼此相邻的行不一定是奇数和偶数？

Answer 1

如果您使用的是jQuery,则可以使用其中一个函数,例如.filter(),仅选择可见的元素.但这里的关键是CSS选择器:visible.

例如(见jsfiddle):

jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});

Answer 2

由于“缺失条纹现象”仅在隐藏奇数行时才会发生，因此您可能会在隐藏奇数行的地方添加一个不可见的填充行。

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

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

但是，如果您的表很大并且隐藏了大块连续行，那么这将比 Javascript/jQuery 解决方案表现得更好。