Question

我一直在使用jquery.tablesorter对表进行排序，但我想通过使用background-image为表头提供一个模式。如果我这样做，排序单元格上的.headerSortUp和.headerSortDown类会覆盖这些单元格上的背景图像。

我读过CSS3支持多种背景，但是同时使用背景图像和排序箭头/图像的最佳方法是什么？

我的想法是

制作同时具有图案和箭头的图像（看起来不是很优雅）
为每个th添加一个div或span并将sort类应用于该而不是th

任何建议都将不胜感激。实际上，jqGrid是我正在寻找的一个很好的例子。也许我应该买那个。

感谢。

Answer 1

将空div插入<th>标记并应用排序类应该为您提供快速清洁的解决方案。

Answer 2

您可以将表格标题设置为position: relative并使用设置为::before的{{1}}来应用您想要的bg。这样，您就不必将jquery ui css的单独版本与其中的自定义更改保持一致。

Answer 3

使用Pure 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;
}

Also check my JSFiddle: http://jsfiddle.net/rTXXz/2/

表头背景图像和排序箭头图像

3 个答案: