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

Posted 2023-03-06

【中文标题】表头背景图像和排序箭头图像

【英文标题】：Table header background-image and sorting arrow images

【发布时间】：2011-07-18 09:18:47

【问题描述】：

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

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

我的想法是

制作既有图案又有箭头的图像（看起来不太优雅） 为每个 th 添加一个 div 或 span 并对其应用排序类而不是 th

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

谢谢。

【问题讨论】：

jqGrid 带有 MIT 许可证，不是吗？为什么需要购买它？当然，您可以购买支持时间以表示感谢。我会在每个 th 中使用 div。

也许习惯了。现在它只有30个许可证。 trirand.net/licensing.aspx

jqGrid 客户端仍处于 MIT 许可证下（请参阅他们的 google 代码站点）。 php 或 .NET 堆栈是专有的，价格不同。

在这里查看我的纯 CSS 答案：***.com/a/22222257/2195518（可能重复）

【参考方案1】：

在<th> 标签中插入一个空的 div 并应用排序类应该会给你一个快速干净的解决方案。

【参考方案2】：

您可以将表头设置为position: relative 并使用::before 设置为display: block; position: absolute; top,left,right,bottom: 0; 来应用您想要的bg。这样您就不必保留一个单独的 jquery ui css 版本，其中包含您的自定义更改。

【参考方案3】：

使用纯 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/