TableSorter: How can I change the position of sorting arrows

Question

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?

Answer 1

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;
}​