I'm implementing jquery's tablesorter. I need to change the sorting arrows position with respect to the title of the column.

Here is what I've done so far:

table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: 80% 70%;
    cursor: pointer;
}

This works fine for a column but not for the others where they overlap the title or go far to the right.
Is there a way to keep the arrows always show very next to the column title?

I'm implementing jquery's tablesorter. I need to change the sorting arrows position with respect to the title of the column.

Here is what I've done so far:

table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: 80% 70%;
    cursor: pointer;
}

This works fine for a column but not for the others where they overlap the title or go far to the right.
Is there a way to keep the arrows always show very next to the column title?

• javascript
• jquery
• css
• tablesorter

4 Answers 4

If you are using the default blue theme, all you need to do is change the background position of the arrows then add left padding to move the text away from it - demo

table.tablesorter thead tr .header {
    background-position: left center;
    padding-left: 20px;
}​

As of the latest dataTables v.1.10.4 (on Dec 8 2014), they changed the name of the classes. In case you wish to put the sorting arrows on the left of the column title, the following CSS should be used get desired result:

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled
 {
    background-position: left center;
    padding-left: 20px;
}​

You could add a span after the column name where you change the class.. Like:

<tr>Column 1 <span class="sort-arrow" /></tr>

This question seems to be similar and provides a solution akin to the above: jquery tablesorter CSS arrow icons

The accepted answer did not work for me. To keep the sorting arrows just to the left of the table header text, this worked:

.tablesorter-header {
  display: table-cell !important;
  vertical-align: middle !important;
  background-position: left center !important;
  padding-left: 20px;
}

.tablesorter-header-inner{
  padding-left: 25px;
}