CSS表单元格背景图像文本重叠

Question

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

举个例子，去这里：http://tablesorter.com/docs/然后收缩浏览器，直到上/下箭头在Age列的文本后面。我有类似的事情发生。

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

所以没有人知道如何为a指定某个“填充”。填充权利和保证金权利似乎没有任何效果。

Answer 1

这是在你的现在：

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

背景图像中的类头设置，所以你可以订购递增或递减

我想唯一的解决办法是尝试像这

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

这样你的形象将永远是你的标题 希望的右手边这有助于

Answer 2

或者只是添加到您的CSS：

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

Answer 3

使用下面的CSS：

thead th 
{ 
    padding-right: 20px; 
} 

这通过创建一个“空白”空间，图像将是解决这个问题。

Answer 4

我知道这是一个古老的问题，但当遇到同样的问题时发现填充或页边没有帮助时遇到了这个问题。

Tablesorter为您在头文件中添加一个div，您可以将margin-right添加到div以解决问题。

的的tablesorter使头部看起来像这样：

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

所以到DIV我把这个CSS：

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