Archive

Archive for the ‘tablesorter’ Category

Tablesorter alternative coloring problem and solution

March 27, 2011 5 comments

The problem:
When trying to combine zebra effect (alternative row colors) and row-hover highlight effect, only the even rows shows the highlight effect.

The (original code):
$(function() {
$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra'] });
});


/*style.css*/
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter tr:hover td {
background-color: #632a2a;
color: #fff;
}

The fix:

/*style.css*/
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter tr.odd:hover td, table.tablesorter tr:hover td {
background-color: #632a2a;
color: #fff;
}

Other thought:
The highlight effect has not been tested in IE6 yet, might need to use js to achieve the same effect.

Advertisements
Categories: tablesorter