表标题背景图像和排序箭头图像 [英] 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屋！