jquery tablesorter CSS箭头图标 [英] jquery tablesorter CSS arrow icons

问题描述

这真的是一个CSS问题比一个jQuery问题。我使用tablesorter jQuery插件动态地对表进行排序。

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:

这里是我使用的CSS代码：

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?

推荐答案

放置一个<$ c $在 th 中创建 span 标记，并将其标记为：

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

这篇关于jquery tablesorter CSS箭头图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！