jquery tablesorter CSS箭头图标

Question

这更像是一个CSS问题，而不是一个jQuery问题。我正在使用tablesorter jQuery插件动态地对表进行排序。

以下是目前的情况：

这是我正在使用的CSS代码：

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")
}

我对当前实现的问题是箭头在标题的右侧。在上面的示例中，表按级别排序，但它几乎看起来可能是位置。

是否有一种简单的方法可以将箭头移到左侧，因此它直接位于“关卡”标签末尾的右侧？

Answer 1

在span中放置th标记并将其设置为：

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

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

Answer 3

试试这个：

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

并将span添加到您的th

修改：将div更改为span（请参阅下面的内容）

Answer 4

就我而言，这有效：

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

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

从web下载的Style.css只有headerSOrtUp类，但这只适用于tablesorted-headerSortUp类，所以他们必须更改它。

希望能节省一些时间。

Answer 5

如果您级联样式表，它将看起来与TableSorter站点上的样式完全相同。你甚至不需要从包中移动它。只需在样式表声明后添加此行：

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

Answer 6

我只是错过了添加到表格中的“tablesorter”类。我添加它并解决了。愿这有助于某人：）