I have an HTML table that I use as column headers to a grid view. Clicking on a column header triggers javascript that makes the grid view sort, and an icon showing that the column is sorted shows up next to the column text, similar to below:
|---------------------------------------------------------------------------------| | <span> Column 1 </span> <div class='sortImgSprite' /> | <span> Column 2 </span> | |---------------------------------------------------------------------------------| The table has table-layout: fixed, and the span for text has overflow: hidden, text-overflow: ellipsis, white-space: nowrap.
When the text is very long, I do get the ellipsis effect that I want, but the sort icon sprite (div with width and background set) gets clipped off the right side of the table cell. Any suggestions how to make sure the sort icon gets precedence for space over the ellipsizing text via CSS? If a column is ‘sorted’, I want the sort img to always be there and have the text ellipsize instead of the text pushing the img out of the visible space of the cell:
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.