Table header background-image and sorting arrow images

Question

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.

I read CSS3 supports multiple backgrounds, but what is the best way to use both a background-image and have sort arrows/images?

My thoughts were to

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

Any advice would be appreciated. Actually, jqGrid is a good example of what I'm looking for. Maybe I should just buy that.

Thanks.

jqGrid comes with MIT license, does it not? Why do you need to buy it? You can buy support hours as a token of appreciation, of course. I would go with div in each th. — Alex Pakka, Mar 18 '11 at 18:23
Maybe is used to. Now it's only a 30 license. http://www.trirand.net/licensing.aspx — Jay, Mar 24 '11 at 14:31
jqGrid Client is still under MIT license (see their google code site). PHP or .NET stack is proprietary with varying pricing. — Alex Pakka, Apr 13 '11 at 04:25
Check my Pure CSS answer here: http://stackoverflow.com/a/22222257/2195518 (possible duplicate) — Kapitein Witbaard, Apr 11 '14 at 07:19

score 0 · Answer 1 · answered Apr 11 '14 at 07:21

Use a Pure CSS solution:

.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/

score 0 · Answer 2 · answered Mar 18 '11 at 18:21

0

Inserting an empty div into the <th> tag and applying the sort class should give you a quick clean solution.

answered Mar 18 '11 at 18:21

Surreal Dreams

26,055
3
46
61

score 0 · Answer 3 · answered Mar 18 '11 at 18:25

You could probably get away with setting the table headers to position: relative and use ::before set to display: block; position: absolute; top,left,right,bottom: 0; to apply the bg you want. This way you don't have to keep a separate version of the jquery ui css with your custom changes in it.

Table header background-image and sorting arrow images

3 Answers3

Linked