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; 
}