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

Question

我正在使用 Tablesorter Jquery 插件对表格进行排序，但样式表中指定的图像背景图像落后于列上的文本，其中列的实际内容不够长，无法将列宽推到超过标题文本。

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

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

那么有谁知道如何为 . padding-right 和 margin-right 似乎没有任何效果。

score 3 · Accepted Answer

使用以下 CSS：

thead th
{
    padding-right: 20px;
}

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

score 1 · Accepted Answer

这就是现在你的单元格中的内容：

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

背景图像设置在类标题中，因此您可以订购 asc 或 desc

我想唯一的解决方案是尝试这样的事情

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

这样，您的图像将始终位于标题的右侧希望这会有所帮助

score 1 · Accepted Answer

1

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

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

于 2009-02-06T08:32:43.647 回答

score 0 · Accepted Answer

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

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

表格排序器使标题看起来像这样：

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

所以我把这个css放到了div上：

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

4 回答 4