Today I needed yet another zebra-striped table on a page. Having just converted this app to use jQuery, I thought, “there must be a simple way to decorate a table unobtrusively.” It was absolutley simple.
$(document).ready(function() { // adds classes for zebra striping table rows $('table.zebra tr:even').addClass('zebra_stripe'); }
Now, any table with the zebra class has its even rows decorated with the zebra_stripe class and those rows are styled like so:
tr.zebra_stripe { background-color: #F1F5FA; }
Advertisements