Create the table using HTML
(If your using div to generate a table you can apply the same for relevant divs as well)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <table id="box-table-a" summary="Employee Pay Sheet"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$150</td> <td>Bob</td> </tr> <tr> <td>..</td> </tr> </tbody> </table> |
Create a CSS classes as folows
1 2 3 4 5 6 | .odd{ background-color : #F1F1F1; } .even{ background-color : #666699; } |
Add Styling using JQuery
JQuery has an attribute to identify odd and even rows in a specified scope. '$('tr:odd')' will check the first odd
1 2 3 4 | $(document).ready( function(){ $('tr:odd').addClass('odd'); $('tr:even').addClass('even'); } |