Angular reapply table striping after hiding rows - css

Question

I've got a table that needs to be striped but it has some rows that may become hidden later on. After hiding some of the rows re-striping does not occur so the striping is off. How can I force the table to re-stripe itself? Here is my css that I feel should work, but it's not. And then also my html.
.isHidden {
display:none;
}
tbody {
tr:not(.isHidden):nth-child(odd) {
background: rgb(238, 238, 238);
}
}
<tbody>
<tr [ngClass]="{'isHidden': !line.get('isVisible').value}" *ngFor="let line of lineDetailsArray.controls; let i=index;">
...
</tr>
</tbody>

Answer 1

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