Сбивается чередование цветов в таблице при удалении некоторых строк

[Oktava6]

Добрый день! К сути:

 

Есть таблица, в которой применено чередование цветов в четных/нечетных строках:

tr:nth-child(2n) td{	background-color: #def;}tr:nth-child(2n+1) td{	background-color: #ddf;}

Чекбоксом скрываю часть строк:

#check-in:checked ~ * .up{  display: none;}

После этого чередовании цветов в строках сбивается.

Есть ли какая-либо возможность применить чередование только к тем строкам, которые отображены (т.е. display: table-row) или может есть более простые способы удалить строки с сохранением чередования цветов?

Заранее спасибо за советы!

 

html:

<input type="checkbox" id="check-up"><input type="checkbox" id="check-in">   <table>      <thead>         <tr><td></td></tr>      </thead>      <tbody>         <tr class="up"><td></td></tr>         <tr class="in"><td></td></tr>         <tr class="up"><td></td></tr>         <tr class="up"><td></td></tr>         <tr class="in"><td></td></tr>         <tr class="in"><td></td></tr>         <tr class="up"><td></td></tr>         <tr class="in"><td></td></tr>         .............................         <tr class="in"><td></td></tr>      </tbody>   </table>

[Oktava6]

Забыл добавить: это нужно реализовать без использования JavaScript.

[afdw]

Единственное, что приходит в голову, так это просто сделать у таблицы фоном повторяющийся градиент чередования строк.

[Oktava6]

Единственное, что приходит в голову, так это просто сделать у таблицы фоном повторяющийся градиент чередования строк.

Интересный вариант, но дело в том, что градиент применится ко всей таблице, в том числе и к тем строкам, которые display: none. Нужно найти возможность не учитывать скрытые элементы, либо как-то удалять строки таблицы

[afdw]

http://jsfiddle.net/83cdopdL/