CSS表格细胞背景图象文本重叠

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.

我正在使用Tablesorter Jquery插件对表进行排序,但样式表中指定的图像背景图像落在列的文本后面,其中列的实际内容不足以推动列宽超出长度标题文字。

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.

例如,请访问:http://tablesorter.com/docs/然后缩小浏览器,直到向上/向下箭头位于Age列的文本后面。我发生了类似的事情。

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.

我可以硬编码列的宽度足够宽,但我宁愿在CSS文件中有一个更可重用的解决方案。

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

所以有人知道如何为a指定某个“填充”。 Padding-right和margin-right似乎没有任何影响。

4 个解决方案

#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

背景图像在类标题中设置,因此您可以订购asc或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

通过这种方式,您的图像将始终位于标题的右侧,希望这会有所帮助

#2

Use the following CSS:

使用以下CSS:

thead th
{
    padding-right: 20px;
}

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

这通过创建图像所在的“空白”空间来解决问题。

#3

or just add this to your css:

或者只是将其添加到您的CSS:

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

#4

I know this is an old question but I came across it when I ran into the same problem and found that padding or margins on the th don't help.

我知道这是一个老问题,但是当遇到同样的问题时我发现它并发现填充或边距没有帮助。

Tablesorter adds a div inside the header for you and you can add the margin-right to the div to fix the problem.

Tablesorter为您在标题中添加了一个div,您可以在div中添加margin-right来解决问题。

The tablesorter makes the headers look like this:

tablesorter使标题看起来像这样:

<th data-column="2" class="tablesorter-header">
    <div class="tablesorter-header-inner">Header Text Here</div>
</th>

So onto the div I put this css:

所以在div上我把这个css:

table.tablesorter thead tr th .tablesorter-header-inner {
    margin-right: 15px;
}

#1