Zebra Striping a Table with Hidden Rows Using CSS3

#mytable tr:nth-child(odd) {
  background-color: #000;
}

#mytable tr:nth-child(even) {
  background-color: #FFF;
}

<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>

jQuery Table Zebra Striping with hidden rows

Try adding the :visible pseudo-selector:

$("#tableid tr:visible:even").addClass("evenClass");

Demo: http://jsfiddle.net/gRyFx/1/

AngularJS zebra striping for table with hidden rows

One approach would be to use ng-if, instead of ng-hide. This would prevent the element from being created, rather than hiding it. Then the css would work as expected.

Here is a working plnkr

Zebra stripes ignoring hidden elements

There is no way to do this in pure CSS as adding display:none or visibility:none doesn't remove the elements from the DOM, which is what CSS uses.

As a result, you will need to add a little JavaScript (which runs once the page has loaded) to do this, like so

var trs = document.getElementsByTagName("tr"), // Select whichever ones you need
    count = 0; // Counter for the non-hidden ones

for(var i = 0; i < trs.length; i++) {    
    if(!trs[i].classList.contains("hidden") && (count++)%2 == 0) { // Odd ones
        trs[i].style.background = "black";
    } else if(!trs[i].classList.contains("hidden")) { // Even ones
        trs[i].style.background = "lightgrey";
    }
}

Angular reapply table striping after hiding rows

At present, you won't be able to solve the problem with CSS only, unfortunately. True, there's a potentially useful addition in the spec - :nth-child(An+B of S). The following example exactly matches your case:

Normally, to zebra-stripe a table’s rows, an author would use CSS
similar to the following:

tr {
  background: white;
}
tr:nth-child(even) {
  background: silver;
}

However, if some of the rows are hidden and not displayed, this
can break up the pattern, causing multiple adjacent rows to have the
same background color. Assuming that rows are hidden with the [hidden]
attribute in HTML, the following CSS would zebra-stripe the table rows
robustly, maintaining a proper alternating background regardless of
which rows are hidden:

tr {
  background: white;
}
tr:nth-child(even of :not([hidden])) {
  background: silver;
}

The caveat? Support of this option in browsers is not even limited: it's non-existent.

---

But still, there's a way out of this misery. Even though Angular won't just let you place ngIf and ngFor on a single element (it'll be way too simple I suppose), there's a workaround - using <ng-container> as a placeholder:

<ng-container *ngFor="let item of list">
  <ng-container *ngIf="!item.hidden">
    <tr>
      <td>{{item.name}}</td>
      <td><input type="checkbox" 
                [checked]="item.hidden" 
                (change)="item.hidden = !item.hidden" /></td>
    </tr>
  </ng-container>
</ng-container>

Demo (kudos to @imkremen for helping to create this one).

Hide/show TRs in a table keeping zebra striping

CSS's :nth-child selector selects an element based on its index among its siblings. It does not take the visibility (or other selectors) of an element into account.

Instead of adding/removing rows using jQuery, just add/remove class names: http://jsfiddle.net/rTER4/

var $allRows = $('tr:visible');
var $oddRows = $allRows.filter(':odd');
var $evenRows = $allRows.filter(':even');

// Remove old classes, then add new ones.
$oddRows.removeClass('even').addClass('odd');
$evenRows.removeClass('odd').addClass('even');

/* CSS */
tr.even { background-color: red; }
tr.odd  { background-color: blue;}

Retain zebra striping of table after rows are filtered with Alpine.js

use :key="row.id" in order to give those items specific ids. This way, alpine.js will remove the inactive rows from the DOM so the odd/even count will not be messed up with the rows being hidden.

Datatables: keep zebra stripes after hiding / showing table rows

I use datatables as well. Love it but dont use the added classes for 'zebra stripes' lol.

If your users are past IE8 you could just let CSS do it like so:

tr:nth-child(even) {
    background-color: #000000;
}

EDIT: Based on comment. If you will be hiding rows rather than removing them jQuery is the best answer. Note the ":visible" in the selector. Using addClass would be a better call hence we could removeClass from the tr selector before we stripe the table.

Or use jQuery:

$(document).ready(function()
{
    $("tr:visible:even").css("background-color", "#000000");
});

---

Related Topics