Search code examples
javascriptjquerycssinternet-explorer-8tablesorter

jQuery tablesorter - IE8 issue with adding style to table row

Using jQuery tablesorter to sort and give style to each odd row in the table.

Issue: IE8 ignores the table row background or wouldn't apply the style for odd rows. Any idea how to make this work for IE < 9?

Here is the http://jsfiddle.net/rdos/kg7e771g/3/ - this works fine in all browsers except IE < 10

Thanks!

JSP:

<html>
<head>
<style type="text/css">
.tablesorter tbody tr:nth-child(odd) {
    background-color: #faf4e2;
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
    $(document).ready(function() {          
            $("#myTable").tablesorter();            
        } 
    ); 
</script>
</head>

<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th>     
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Saul</td> 
    <td>Tarsus</td> 
    <td>[email protected]</td> 
   </tr> 
<tr> 
    <td>Paul</td> 
    <td>Rock</td> 
    <td>[email protected]</td>     
</tr> 
</tbody> 
</table> 
</body>
</html>
Solution

  • Can add td to rule

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

    Or 

      .tablesorter tbody tr:nth-child(odd), .tablesorter tbody tr:nth-child(odd) td{
        background-color: #faf4e2;
    }

    Or

    Add an IE conditional comment around a style tag that adds the td rule so it only takes effect in IE < 9