表标题背景图像和排序箭头图像 [英] Table header background-image and sorting arrow images
问题描述
我一直在使用jquery.tablesorter来排序我的表,但我想通过使用background-image给我的表头模式。如果我这样做,排序单元格的.headerSortUp和.headerSortDown类覆盖这些单元格的背景图片。
I've been using jquery.tablesorter to sort my tables, but I'd like to give my table headers a pattern by using a background-image. If I do it that way, the .headerSortUp and .headerSortDown class on sorted cell(s) overwrite the background-image on those cells.
我读CSS3支持多个背景,但是使用背景图像和排序箭头/图像的最好方法是什么?
I read CSS3 supports multiple backgrounds, but what is the best way to use both a background-image and have sort arrows/images?
我的想法是
- 制作同时具有图案和
- 向每个th添加一个div或span,并将排序类应用于而不是th
- Make images that have both the pattern and the arrows (doesn't seem very elegant)
- Add a div or span to each th and apply the sort class to that instead of the th
任何建议都将不胜感激。实际上,jqGrid是我正在寻找的一个很好的例子。也许我应该买。
Any advice would be appreciated. Actually, jqGrid is a good example of what I'm looking for. Maybe I should just buy that.
谢谢。
推荐答案
纯CSS解决方案:
.headerSortDown:after,
.headerSortUp:after{
content: ' ';
position: relative;
left: 10px;
border: 8px solid transparent;
}
.headerSortDown:after{
top: 10px;
border-top-color: silver;
}
.headerSortUp:after{
bottom: 15px;
border-bottom-color: silver;
}
也检查我的JSFiddle: http://jsfiddle.net/rTXXz / 2 /
这篇关于表标题背景图像和排序箭头图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!