Css Alternate Rows - Some Rows Hidden

I'm trying to style a table so that each row is a different colour (odd/even). I have the following CSS: #woo tr:nth-child(even) td { background-color: #f0f9ff; } #woo tr:nth-

Solution 1:

If you are using jQuery, you can employ one of its functions, for example .filter(), to choose only the elements that are visible. But the key here is a CSS selector :visible.

For example (see jsfiddle):

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

Solution 2:

Since the "missing stripe phenomenon" only occurs if an odd number of rows is hidden, you might get away with adding a single invisible padding row wherever an odd number of rows is hidden.

Row1Row2Row3 (hidden)
Padding (hidden)
Row4Row5

If this actually is a good solution highly depends on your current code, e.g. how you create the table and how rows are hidden.

But if your tables are huge and large chunks of consecutive rows are hidden, this would perform much better than a Javascript/jQuery solution.

Solution 3:

I solved this issue using a background image for the table that consisted of the two alternate colors. This makes for not-quite-a-full-CSS solution as it involves creating an image, but it should scale very well for tables with thousands of entries.

The background-image in the base64 encoding below is a 1x50 image with the top 25 pixels as one color and the bottom 25 pixels as the alternate color.

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

<table><tbody><trstyle="display: table-row;"><td>ANIMAL!!</td></tr><trstyle="display: table-row;"><td>Beaker</td></tr><trstyle="display: none;"><td>Bunsen Honeydew, Ph.D.</td></tr><trstyle="display: table-row;"><td>Camilla the Chicken</td></tr><trstyle="display: table-row;"><td>Dr. Julius Strangepork</td></tr><trstyle="display: none;"><td>Dr. Teeth</td></tr><trstyle="display: none;"><td>Floyd Pepper</td></tr><trstyle="display: none;"><td>Gonzo</td></tr><trstyle="display: table-row;"><td>Janice</td></tr><trstyle="display: none;"><td>Miss Piggy</td></tr><trstyle="display: none;"><td>Rizzo</td></tr><trstyle="display: none;"><td>Robin the Frog</td></tr><trstyle="display: table-row;"><td>Sam the Eagle</td></tr><trstyle="display: table-row;"><td>Statler</td></tr><trstyle="display: none;"><td>The Swedish Chef</td></tr><trstyle="display: table-row;"><td>Waldorf</td></tr><trstyle="display: none;"><td>Zoot</td></tr></tbody></table>

Solution 4:

I realize this is super late, but I ran into this same problem today and came up with a pure CSS solution using an nth-child formula. I don't know if it fits your exact scenario, but if every other row is hidden but you still need the visible rows to be alternating colors, this works great. The CSS selector looks like this:

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

Here is a fiddle showing it in action.

This makes every other visible row grey. For more information on how these formulas work, this is a great tutorial.

Solution 5:

This is a hard problem, I just spent a while playing with CSS2 and 3 selectors, and I'm not sure we're there yet. Something like this should be possible, but doesn't work:

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>

Seems you're stuck with jQuery's :visible extension (not native CSS), but if it's running slow, definitely paginate the rows as @Ionut says.