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