jquery tablesorter CSS arrow icons

问题

This is really more of a CSS question than a jQuery question. I'm using the tablesorter jQuery plugin to sort tables dynamically.

Here's what it looks like currently:

Here's the CSS code that I'm using:

th.sortable{
    font-weight: bold;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center right;
}

th.headerSortUp {
    background-image: url("arrow-up.gif");
}
th.headerSortDown {
    background-image: url("arrow-down.gif")
}

The problem that I have with the current implementation is that the arrow is way over on the right of the header. In the above example, the table is being sorted by level, but it almost looks like it could be by location.

Is there an easy way to move the arrow over to the left, so it's directly to the right of the end of the "level" label?

回答1:

Place a span tag in your th and style it with:

th.headerSortUp span {
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 15px;
}

回答2:

th.tablesorter-headerUnSorted {
    background-image: url(/share/css/contextmenu/images/sort_both.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-header {
    background-image: url(/share/css/contextmenu/images/sort_both.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-headerDesc {
    background-image: url(/share/css/contextmenu/images/sort_desc.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-headerAsc {
    background-image: url(/share/css/contextmenu/images/sort_asc.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

回答3:

Try this:

th.headerSortUp span{
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 20px;
}

th.headerSortDown span{
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 20px;
}

And add span to your th

Edit: Changed div to span (see coments below)

回答4:

In my case, this worked:

table.tablesorter th.tablesorter-headerSortUp {
  background-image: url(../images/asc.gif);
}

table.tablesorter th.tablesorter-headerSortDown {
  background-image: url(../images/desc.gif);
}

Style.css downloaded from web cantained only headerSOrtUp class, but this works only with tablesorted-headerSortUp class, so they must have changed it.

Hope it saves some time to someone.

回答5:

If you cascade their stylesheet, it will look exactly the way it looks on the TableSorter site. You don't even need to move it from their package. Just add this line after your style sheet declaration:

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />

回答6:

I was just missing the "tablesorter" class added to table. I added it and it solved. May this help somebody :)

来源：https://stackoverflow.com/questions/8509027/jquery-tablesorter-css-arrow-icons

标签

javascript

jquery

css

icons

tablesorter