ansaurus

Question

CSS column header with img - how to dock img/div to the right?

Answer 1

+2 A:

I'm not sure what floats you're adding to the image, but have you tried floating to the right and adding a right-margin of about 5 px? That would push it inside.

jerebear 2009-01-22 00:15:11

Be sure to give the <span> a padding-right: equal to the width of the image, plus whatever margin you want the image to have (left *and* right).

Ben Blank 2009-01-22 00:25:02

Answer 2

A:

Why wouldn't you just add the "sortImgSprite" class to the <span> tag instead? Since you're doing the sorting via JavaScript anyway, you must have a handle to the table column?

When the user sorts on a column, add the "sortImgSprite" class to the left or right (maybe add a little padding if required) and remove it when that column is no longer sorted.

...or have I missed something?

Ah. I had missed something. Thought the text that was overflowing was in rows below the column headers, not in the headers themselves.

Ok, so what if you were to add the class to the table header? Your <th> tag (if that's what you use) could have the image aligned to the right of the cell and then your <span> tag could inherit that class and add the other formatting (such as the text-overflow, etc)?

Again, you may need padding on the right of your span so that the table header cell's background image can be seen clearly behind any text.

Phil.Wheeler 2009-01-22 00:21:43

In that case, it may be gobbled if the string were converted to "..." by the browser (because it is too long).

strager 2009-01-22 00:48:35

Answer 3

A:

Thanks for the recommendations! Here's what I ended up doing to get what I wanted via CSS:

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>

sunflowerpower 2009-01-23 01:17:26

ansaurus

tags:

views:

answers:

CSS column header with img - how to dock img/div to the right?

related questions