CSS Alternate Rows – 隐藏一些行

我正在尝试设置一个表格，以便每一行都是不同的颜色（奇数/偶数）。 我有以下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

我使用由两种替代颜色组成的表的背景图像解决了这个问题。 这使得不太完整的CSS解决方案因为它涉及创建图像，但它应该可以很好地扩展到具有数千个条目的表。

下面的base64编码中的背景图像是1×50图像，其中前25个像素作为一种颜色，后25个像素作为替代颜色。

 table { border-collapse: collapse; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=); } td { padding: 2px 4px; height: 21px; } 

 
 
 
 
ANIMAL!!
 
 
 
Beaker
 
 
 
Bunsen Honeydew, Ph.D.
 
 
 
Camilla the Chicken
 
 
 
Dr. Julius Strangepork
 
 
 
Dr. Teeth
 
 
 
Floyd Pepper
 
 
 
Gonzo
 
 
 
Janice
 
 
 
Miss Piggy
 
 
 
Rizzo
 
 
 
Robin the Frog
 
 
 
Sam the Eagle
 
 
 
Statler
 
 
 
The Swedish Chef
 
 
 
Waldorf
 
 
 
Zoot
 
 
  

Answer 3

这是一个难题，我只花了一段时间玩CSS2和3个选择器，我不确定我们还在那里。 这样的事情应该是可能的，但不起作用：

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

似乎你坚持使用jQuery :visible扩展（不是原生CSS），但如果它运行缓慢，肯定会将行分页为@Ionut说。

Answer 4

我意识到这已经太晚了，但我今天遇到了同样的问题，并提出了一个使用nth-child公式的纯CSS解决方案。 我不知道它是否适合您的确切方案，但如果每隔一行都被隐藏但您仍然需要可见行是交替颜色，这很有用。 CSS选择器如下所示：

tr:nth-child(4n - 1) { background-color: grey; }

这是一个显示它在行动的小提琴 。

这使得每个其他可见行变灰。 有关这些公式如何工作的更多信息， 这是一个很棒的教程 。

Answer 5

由于只有隐藏了奇数行才会出现“缺失条纹现象”，因此只要隐藏了奇数行，就可以添加一条不可见的填充行 。

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

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

但是如果你的表很大并且隐藏了大量连续行，那么这比Javascript / jQuery解决方案要好得多。

Answer 6

如果使用jQuery，则可以采用以下方法：

JavaScript的

 $("tr:odd").addClass("odd"); 

CSS

 .odd { background: #ccc; } 

资料来源： http ： //css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-table/