Property that can be gotten and set by CSS (a variable?)

I'm trying to make a CSS only zebra table which is compatible with IE 7.

I tried this:

.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;
}

The vertical-align doesn't affect anything, because of the first rule. I set the color of the first tr to color1 and vertical-align to indicator1. Then I try to get the vertical align of the tr by using valign, but that doesn't work. vertical-align isn't valign, just like bgcolor isn't background-color. I can get valign, but I can't set it. I can set vertical-align, but I can't get it through CSS. Can you think of something that can be set and gotten in CSS?

.zebra is the table, which is regular:

<table class="zebra" border="0">
<tr>
    <td>cell<开发者_C百科/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>

You asked for it.

---

I'm pretty sure IE7 doesn't support a good way of selecting odd or even rows within a table with a dynamic number of rows, without you marking them up as such:

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

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

Or, you could use a jQuery script to do the work for you, like mentioned here: http://masterdev.dyndns.dk/dev/16.html

Personally, I use this (for modern browsers):

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

Note that this does not require you to mark-up each row. I fall back to a normal (non-zebra) table for older browsers. With my project, however, I am permitted some level of graceful degradation.