Свойство, которое можно получить и установить с помощью CSS (переменная?)

Question

Я пытаюсь создать таблицу «Зебра только CSS», совместимую с IE 7.

Я пробовал это:

.zebra {
    border-collapse: collapse;
}
.zebra tr:first-child {
    background-color: #7BCC70;
    vertical-align: top;
}

.zebra tr[valign=top] + tr {
    color: #EEE;
    vertical-align: bottom;
}
.zebra tr[valign=bottom] + tr {
    color: #7BCC70;
    vertical-align: top;
}

Вертикальное выравнивание ни на что не влияет из-за первого правила. Я установил цвет первого tr в color1 и выровняю по вертикали в индикатор1. Затем я пытаюсь получить вертикальное выравнивание tr, используя valign, но это не работает. вертикальное выравнивание не является допустимым, как bgcolor не background-color. Я могу стать доблестным, но я не могу это установить. Я могу установить вертикальное выравнивание, но я не могу получить его с помощью CSS. Можете ли вы придумать что-то, что можно установить и получить в CSS?

.zebra - таблица, которая является регулярной:

<table class="zebra" border="0">
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr style="background-color: white;">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
</table>

Вы просили об этом.

Answer 1

Я почти уверен, что IE7 не поддерживает хороший способ выбора нечетных или четных строк в таблице с динамическим числом строк, без того, чтобы вы пометили их так:

tr.odd { background-color:#7bcc70; }
tr.even { background-color:#eee; }

<table>
  <tr class="odd">
    <td></td>
  </tr>
  <tr class="even">
    <td></td>
  </tr>
</table>

Или вы можете использовать скрипт jQuery, чтобы выполнить работу за вас, как упомянуто здесь: http://masterdev.dyndns.dk/dev/16.html

Лично я использую это (для современных браузеров):

.zebra tr:nth-child(odd) { background-color: #7bcc70; }
.zebra tr:nth-child(even) { background-color: #eee; }

<table class="zebra">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Обратите внимание, что для этого не требуется разметки каждой строки. Я возвращаюсь к нормальной (не зебре) таблице для старых браузеров. Однако с моим проектом мне позволили некоторый уровень постепенной деградации.