Zebra Rows | Sandbox | Ryan Brill

« Back to article (Multiple Classes in IE)

This demo has been put together to illustrate how using multiple classes falls apart in IE6.

Demo Table

	Network: Friends	alex	5/28/2007 at 12:30 pm
	Plans for today	adambrill	5/21/2007 at 01:50 pm
	Check out my group	Kev	5/21/2007 at 01:49 pm
	PHP developers: code review	heygrady	5/21/2007 at 09:34 pm
	Meeting today	Damien	5/17/2007 at 01:28 pm

HTML Code

<table> <tr class="alt selected"> <td>...</td> </tr> <tr class="selected"> <td>...</td> </tr> <tr class="alt"> <td>...</td> </tr> <tr> <td>...</td> </tr> <tr class="alt"> <td>...</td> </tr> </table>

1. <table>
2. <tr class="alt selected">
3. <td>...</td>
4. </tr>
5. <tr class="selected">
6. <td>...</td>
7. </tr>
8. <tr class="alt">
9. <td>...</td>
10. </tr>
11. <tr>
12. <td>...</td>
13. </tr>
14. <tr class="alt">
15. <td>...</td>
16. </tr>
17. </table>

Toggle Code

CSS Code

tr td { background-color: #fff; } tr.alt td {background-color: #f0f6f9;} tr.selected td { background-color: #d3edfb; } tr.alt.selected td { background-color: #b1dff7; }

1. tr td { background-color: #fff; }
2. tr.alt td {background-color: #f0f6f9;}
3. tr.selected td { background-color: #d3edfb; }
4. tr.alt.selected td { background-color: #b1dff7; }

Toggle Code

« Back to article (Multiple Classes in IE)