表头背景图像和排序箭头图像
我一直在使用jquery.tablesorter来排序我的表，但我想通过使用background-image为我的表头提供一个模式。 如果我这样做，排序单元格上的.headerSortUp和.headerSortDown类会覆盖这些单元格上的背景图像。
我读CSS3支持多种背景，但是使用背景图像和排序箭头/图像的最佳方法是什么？
我的想法是
- 制作同时具有图案和箭头的图像（看起来不是很优雅）
- 为每个th添加一个div或span并将sort类应用于而不是th
任何意见，将不胜感激。 实际上，jqGrid是我正在寻找的一个很好的例子。 也许我应该买那个。
谢谢。
将空div插入
标记并应用sort类应该为您提供快速清洁的解决方案。
你可以放弃将表头设置为position: relative和use ::before set to display: block; position: absolute; top,left,right,bottom: 0; display: block; position: absolute; top,left,right,bottom: 0; 应用你想要的bg。 这样您就不必将jquery ui css的单独版本与其中的自定义更改保持一致。
使用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; }
还检查我的JSFiddle： http ： //jsfiddle.net/rTXXz/2/