Zebra striping a table with hidden rows using CSS3?

Answer 1

I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-color of the odd and even rows around.

Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:

table{
  background:#fff;
  border:1px solid #000;
  border-spacing:1px;
  width:100%;
}
td{
  padding:20px;
}
tr:nth-child(odd)>td{
  background:#999;
}
tr:nth-child(even)>td{
  background:#000;
}
tr[data-hidden=true]{
  display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#000;
}