Question

jQuery 1.7.1, tablesorter, IE 8 – My table has been enabled for sorting using tablesorter plugin. Tablesorter plugin attaches a background image (up and down arrow) for every cell in the header row. I tried to attach a gradient image to the header row, It’s working in Chrome and Firefox but not in IE8. Any way to display the gradient and another image (up and down arrow) together in IE?

HTML

<thead>
   <tr class="header">
    <th align="center">No</th>
    <th align="center">NAME</th>
   </tr>
</thead>

CSS (gradient provide by me)

<style type="text/css">
 .header {
   background: url('images/bl.gif') repeat-x;
 }
</style>

CSS (as part of tablesorter plugin)

table.tablesorter thead tr .header {
   background-image: url(images/bg.gif); /* up and down arrow */
   background-repeat: no-repeat;
   background-position: center right;
   cursor: pointer;
}

UPDATE:
Modified my code based on @fudgey suggestion,

CSS (as part of tablesorter plugin)

table.tablesorter thead tr .header span{
   background-image: url(images/bg.gif); /* up and down arrow */
   background-repeat: no-repeat;
   background-position: center right;
   cursor: pointer;
}
table.tablesorter thead tr .headerSortUp span{
  background-image: url(images/asc.gif);
  background-repeat: no-repeat;
}
table.tablesorter thead tr .headerSortDown span{
  background-image: url(images/desc.gif);
  background-repeat: no-repeat;
}

further, I slightly modified fudgey code,

$('#myTable1').tablesorter( 
{
   onRenderHeader: function (){
      this.wrapInner('<span class="grdimg"></span>');
   }
});

and added some CSS based on this,

<style type="text/css">
 .grdimg{
    float:left; width:100%; min-width:100%;
 }
 </style>

Answer 1

There is an undocumented option named onRenderHeader which allows you to add/wrap the table header cell contents. Use can use it as follows:

onRenderHeader: function (){
  $(this).wrapInner("<span></span>");
}

then modify the css to the span for the direction arrows leaving the actual table cell for your background with something similar to this (not tested; it’s just to give you the idea):

table.tablesorter thead th span {
  float: right;
  display: block;
  width: 25px;
  height: 10px;
}
table.tablesorter thead tr .headerSortDown span {
  background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortUp span {
  background-image: url(asc.gif);
}

Here is the original demo. You don’t need to download that mod as the changes in the mod were added to tablesorter version 2.0.5.

In case you are interested, that mod includes the cssChildRow option which was also added to tablesorter v2.0.5 and is also undocumented. I have a blog post here that goes into more depth.