jquery tablesorter CSS箭头图标

这实际上是一个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

在您的th放置一个span标签并使用以下方式设置样式：

 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

编辑：将div更改为span（请参阅下面的coments）

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站点上的样式完全相同。 你甚至不需要从包中移动它。 只需在样式表声明后添加此行：

Answer 6

我只是错过了添加到表中的“tablesorter”类。 我加了它就解决了。 愿这有助于某人:)