CSS Table Cell Background Image Text Overlap

Question

I'm using the Tablesorter Jquery plugin to sort a table, but the images background images specified in the stylesheet fall behind the text on columns in which the actual content of the column isn't long enough to push the column width beyond the length of the header text.

For an example, go here: http://tablesorter.com/docs/ and then shrink the browser until the up/down arrows are behind the text of the Age column. I have a similar thing happening.

I can hard code the width of the column to be wide enough, but I'd rather have a more reusable solution in the CSS file.

So does anyone know how to specify a certain "padding" for a . Padding-right and margin-right don't seem to have any effect.

Answer 1

This is what is in your cell now:

<th class="header">Last Name</th>

The background image is set in the class header so you can order asc or desc

I guess the only solution is to try something like this

<th class="header">
<div style="margin-right: 10px;">Last Name</div>
</th>

in this way your image will always be on the right hand side of your title hope this helps

Answer 2

or just add this to your css:

th.header {
    padding-right: 20px;
}

Answer 3

Use the following CSS:

thead th
{
    padding-right: 20px;
}

This solves the problem by creating a "blank" space where the image will be.