Tablesorter jQuery ZebraStrip not working

Question

I am following this link to make tablesorter jquery. I've tried to follow that method and it's not returning nicely.

HTML

<table id="myTable" class="tablesorter">
    <thead>
        <tr> 
            <th>USERNAME</th>
            <th>EMAIL</th>
            <th>DATE</th>
            <th>NICKNAME</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Hello </td> 
            <td> test@gmail.com </td>
            <td> January </td>
            <td> Hatchiu </td>
        </tr>
        <tr>
            <td> Hello </td> 
            <td> test@gmail.com </td>
            <td> January </td>
            <td> Hatchiu </td>
        </tr>
        <tr>
            <td> Hello </td> 
            <td> test@gmail.com </td>
            <td> January </td>
            <td> Hatchiu </td>
        </tr>
    </tbody>
</table>

CSS..

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 12px;
    width: 100%;
    text-align:left;
}

table.tablesorter thead tr th {
    background-color: #E6EEEE;
    border: 1px solid #CCC;
    font-size: 10px;
    padding: 4px;
    text-align:center;
    vertical-align:middle;
}

table.tablesorter tbody td {
    padding: 4px;
    background-color: #FFF;
    vertical-align: middle;
    border: 1px solid #CCC;
}

table.tablesorter tbody tr:nth-child(odd) {
    background-color:yellow;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

Javascript

$(document).ready(function() 
        { 
            $("#myTable").tablesorter(); 
        } 
    ); 

And also I've got jquery-latest.js and jquery.tablesorter.js.

There are several problem with these.

1. zebra stripping is not working

2. ascending and descending are not working.

and JSFIDDLE to check it out.

Any idea guys?

Answer 1

This will do it:

HTML

<!-- your table code -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="LINKTOPLUGIN.js">
<script>
$(document).ready(function () {
    $("#myTable").tablesorter();
});
</script>

CSS

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 12px;
    width: 100%;
    text-align:left;
}
table.tablesorter thead tr th {
    background-color: #E6EEEE;
    border: 1px solid #CCC;
    font-size: 10px;
    padding: 4px;
    text-align:center;
    vertical-align:middle;
}
table.tablesorter tbody td {
    padding: 4px;
    background-color: #FFF;
    vertical-align: middle;
    border: 1px solid #CCC;
}
table.tablesorter tbody tr:nth-child(odd) td {
    background-color:yellow;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

Answer 2

The problem is the CSS rules.

table.tablesorter tbody tr:nth-child(odd) {
    background-color:yellow;
}

needs to reference the td

table.tablesorter tbody tr:nth-child(odd) td{
    background-color:yellow;
}