Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Alternate table row colours


alt131 - 2:57 pm on Jun 11, 2012 (gmt 0)


I'm coming to this late but wanted to say what an enjoyable read this thread is. Plus foti, great job on getting BDW to try advanced selectors, and BDW, good on you for giving them a try!

For completeness I wanted to add a css solution rather than javascript for ie7&8. Both support :first-child as well as the "+" adjacent sibling selector. That allows you to use the first row as a start point for counting the ones that follow. It's effectively a manual implementation of nth-child, definitely not as elegant, but nicer than manually inserting classes, avoids javascript, and obvious so it's easy to remove when ceasing to support those versions.
tr {background-color:blue;}
tr:first-child + tr,
tr:first-child + tr + tr + tr,
tr:first-child + tr + tr + tr + tr + tr,
tr:first-child + tr + tr + tr + tr + tr + tr + tr {background-color:red}
Keep the css neat to make it easy to scan/count the rows to identify where you are in the table, or if you want to avoid counting, just add two adjacent siblings to the previous selector.


Thread source:: http://www.webmasterworld.com/css/4456880.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com