javascript jquery tablesorter CSS 箭头图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8509027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery tablesorter CSS arrow icons
提问by numegil
This is really more of a CSS question than a jQuery question. I'm using the tablesorter jQuery plugin to sort tables dynamically.
这实际上更像是一个 CSS 问题而不是一个 jQuery 问题。我正在使用 tablesorter jQuery 插件对表格进行动态排序。
Here's what it looks like currently:
这是目前的样子：
Here's the CSS code that I'm using:
这是我正在使用的 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")
}
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?
是否有一种简单的方法可以将箭头移到左侧，使其直接位于“级别”标签末尾的右侧？
回答by janhartmann
Place a spantag in your thand style it with:
span在您的标签中放置一个标签th并使用以下样式对其进行设计：
th.headerSortUp span {
background: url("arrow-up.gif") right center no-repeat;
padding-right: 15px;
}
回答by Rodrigo Ignacio Díaz Durán
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;
}
回答by SlavaNov
Try this:
试试这个：
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;
}
And add spanto your th
并添加span到您的th
Edit:Changed div to span (see coments below)
编辑：将 div 更改为跨度（请参阅下面的评论）
回答by mArtinko5MB
In my case, this worked:
就我而言，这有效：
table.tablesorter th.tablesorter-headerSortUp {
background-image: url(../images/asc.gif);
}
table.tablesorter th.tablesorter-headerSortDown {
background-image: url(../images/desc.gif);
}
Style.css downloaded from web cantained only headerSOrtUpclass, but this works only with tablesorted-headerSortUpclass, so they must have changed it.
从网上下载的 Style.css 只包含headerSOrtUp类，但这仅适用于tablesorted-headerSortUp类，所以他们必须改变它。
Hope it saves some time to someone.
希望它可以为某人节省一些时间。
回答by elgati
If you cascade their stylesheet, it will look exactly the way it looks on the TableSorter site. You don't even need to move it from their package. Just add this line after your style sheet declaration:
如果您级联他们的样式表，它的外观将与在 TableSorter 站点上的外观完全一样。你甚至不需要从他们的包裹中移动它。只需在样式表声明后添加此行：
<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />
回答by Sunny Sharma
I was just missing the "tablesorter" class added to table. I added it and it solved. May this help somebody :)
我只是想念添加到表中的“tablesorter”类。我添加了它，它解决了。可能这对某人有帮助:)
