Home > tablesorter > Tablesorter alternative coloring problem and solution

Tablesorter alternative coloring problem and solution

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
  1. December 10, 2011 at 12:25 pm

    Hi, Neat post. There is an issue together with your website in web explorer, may test this? IE nonetheless is the marketplace chief and a good section of folks will leave out your magnificent writing due to this problem.

    • ricoch3n
      December 10, 2011 at 3:56 pm

      Thanks for poining out the browser compatibility problem, will definitely take a look sometime this weekend.

      – Rico

      • ricoch3n
        December 10, 2011 at 8:51 pm

        Hi, Do you mind letting me know the version of Internet Explorer on which my site doesn’t render correctly? I just tested with IE8 and IE8 with compatibility mode (basically IE7) and it seems OK. I will test with other versions of IE when I got a chance. Thanks again.

  2. Developer Tool
    November 17, 2012 at 6:00 am

    Yeah just add the following lines of code in the heading section . It will cure all the problems of alternet row colour in the table sorter plugin.

    $(document).ready(function () {
    $(“#GridView1”).tablesorter({
    widgets: [‘zebra’]
    });
    });

    • November 21, 2012 at 12:16 am

      Thanks for the note Developer Tool. While tablesorter had its tim I have to say Data Tables (http://datatables.net/) is a much better (total) solution. I have used it exclusively in a number of projects and it works pretty well.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: