The typical way of styling alternating background row colours on a table is to apply
a different CSS class to alternate rows. The "A List Apart" article, Zebra
Tables, goes into some detail about different ways of tackling this. However,
for those who have the luxury of developing IE specific web applications, you can
also take advantage of CSS expressions to achieve the same effect. Since one
can find out the index of a row using sectionRowIndex you can determine whether or
not a row is odd or even using the following JavaScript:
var oddRow = (this.sectionRowIndex % 2 == 0)
It's the odd row because the first row is index is zero, so if you want a more obvious
evaluation of the odd or even row could be rewritten as follows:
var evenRow = ((this.sectionRowIndex + 1) % 2 == 0)
Extending this to a CSS expression then looks like this: >
<table class="AlternatingRowsTable">
<thead>
<tr> <th>Col
1</th>
</tr> </thead>
<tbody>
<tr> <td>Data</td>
</tr> <tr>
<td>Data</td>
</tr> <tr>
<td>Data</td>
</tr> </tbody>
</table>
Here a demo of it in action: CssExpressionsAltRows.htm
(.72 KB)
When browsers eventually start supporting CSS3, you will be able to achieve the same
effect with the following CSS selector tr:nth-child(odd). Pretty cool.