Question

I have a table that resizes, which works fine. The table header cells contain some additional div tags that represent how the table is sorted. For example, if a column is sorted, an ascending/descending image is shown. (Right now, I am using red boxes as placeholders.)

However, when I resize the table, the divs move underneath the text.

I tried this CSS:

overflow:hidden
text-overflow:ellipsis;

It worked for the text of the table, but it did not help the divs. How can I keep the divs from moving underneath the text?

Here is my code: jsfiddle.net

Answer 1

You can make them absolute and add some padding to the cell to avoid superposition.

http://jsfiddle.net/Uf8cN/4/