jquery tablesorter CSS 箭头图标答案

【问题标题】：jquery tablesorter CSS arrow iconsjquery tablesorter CSS 箭头图标
【发布时间】：2011-12-14 17:34:34
【问题描述】：

这实际上更像是一个 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")
}

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

有没有一种简单的方法可以将箭头移到左侧，使其直接位于“级别”标签末尾的右侧？

【问题讨论】：

能否请您发布 HTML 代码或示例链接。

标签： javascript jquery css icons tablesorter

【解决方案1】：

在您的th 中放置一个span 标记并使用：

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

【讨论】：

如果我理解正确，这会将偏移硬编码为 15 像素，对吧？问题在于不同的标头具有不同的标签长度。
它将从内联元素（span）硬编码一个 15px 的偏移量 :-)
并移除背景图片：url(desc.gif); + 背景图片：网址（asc.gif）；背景图片：网址（bg.gif）；来自 style.css
填充只是为了确保图像放置在文本旁边。您可以增加填充以将其移得更远或收缩。

【解决方案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】：

试试这个：

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（请参阅下面的评论）

【讨论】：

这将不起作用，因为 div 是块元素，因此宽度为 100%；

【解决方案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 类，因此他们必须更改它。

希望它能为某人节省一些时间。

【讨论】：

【解决方案5】：

如果您级联他们的样式表，它将看起来与 TableSorter 网站上的外观完全相同。您甚至不需要将其从他们的包裹中移出。只需在样式表声明后添加这一行：

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

【讨论】：

【解决方案6】：

我只是错过了添加到表中的“tablesorter”类。我添加了它并解决了。希望这可以帮助某人:)

【讨论】：