CSS Alternate Rows - some rows hidden
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.
Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5
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.
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: 2px 4px;
height: 21px;
}<table>
<tbody>
<tr style="display: table-row;">
<td>ANIMAL!!</td>
</tr>
<tr style="display: table-row;">
<td>Beaker</td>
</tr>
<tr style="display: none;">
<td>Bunsen Honeydew, Ph.D.</td>
</tr>
<tr style="display: table-row;">
<td>Camilla the Chicken</td>
</tr>
<tr style="display: table-row;">
<td>Dr. Julius Strangepork</td>
</tr>
<tr style="display: none;">
<td>Dr. Teeth</td>
</tr>
<tr style="display: none;">
<td>Floyd Pepper</td>
</tr>
<tr style="display: none;">
<td>Gonzo</td>
</tr>
<tr style="display: table-row;">
<td>Janice</td>
</tr>
<tr style="display: none;">
<td>Miss Piggy</td>
</tr>
<tr style="display: none;">
<td>Rizzo</td>
</tr>
<tr style="display: none;">
<td>Robin the Frog</td>
</tr>
<tr style="display: table-row;">
<td>Sam the Eagle</td>
</tr>
<tr style="display: table-row;">
<td>Statler</td>
</tr>
<tr style="display: none;">
<td>The Swedish Chef</td>
</tr>
<tr style="display: table-row;">
<td>Waldorf</td>
</tr>
<tr style="display: none;">
<td>Zoot</td>
</tr>
</tbody>
</table>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'});