Data Table UI snafu

i’m designing a data table and I want the columns to be sortable. I am simply trying to make the column header links have a little arrow immediately to the right of the text to show which column is sorted and if it is ascending/descending.

I am giving the anchor a background image with the appropriate image of the up or down arrow. This works fine if the column heading text is a single line, the arrow will show up just on the right of the text. However, if the column header text is long and wraps, then the anchor element fills the entire width of the cell and the arrow image is all the way to the far right of the cell. I’ve played around seemingly endlessly with the display and positioning of the elements, there has to be an easy way to accomplish this. Any ideas?

A few additional thoughts:

  • This needs to be scalable, i won’t always know the width of the column this is going to be used in, so i can’t apply a static width to the anchor.
  • It appears to be default behavior of inline elements to fill 100% width if the content within them wraps

XHTML

...
<th width="140" scope="col">
<span class="simplegrid-sort-asc">
<a href="#">First Name</a>
</span>
</th>
<th scope="col" width="175">
<span class="simplegrid-sort-desc">
<a href="#">Long Title that will causethistowrap</a>
</span>
</th>
...

CSS

.simplegrid-sort-asc a
{
	display: inline-block;
	background-image: url('images/up.png');
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 18px;
}
.simplegrid-sort-desc a
{
	display: inline-block;
	background-image: url('images/down.png');
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 18px;
}

Hm.

Your anchors are inline-block. This means that usually they CAN have dimensions but like an inline, they will shrink-wrap to content. So I’m not sure why they are getting wider when they wrap.

What are the spans doing? Meaning, can someone else show the image?

Should the image be content? If it’s just a CSS image then that information is lost if the image cannot be shown for whatever reason (there can’t be any alt text on a CSS image).

If it’s ok to only have a CSS image, maybe you can set a % width, some padding, and use the CSS :after property. You can add content after your plain text content but still inside the anchor tag itself and this content can be given a height and width and a background image (of the arrow).

Some ideas. Seeing the edge of your anchors highlighted would help.