代码之家  ›  专栏  ›  技术社区  ›  Jared

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

  •  2
  • Jared  · 技术社区  · 16 年前

    我正在使用TableSorter jQuery插件对表进行排序,但是样式表中指定的图像背景图像落在列上的文本后面,在这些列中,列的实际内容不够长,无法将列宽推到标题文本的长度之外。

    例如,请点击此处: http://tablesorter.com/docs/ 然后缩小浏览器,直到上/下箭头位于“年龄”列的文本后面。我也发生了类似的事情。

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

    所以有人知道如何为指定特定的“填充”吗?右边距和右边距似乎没有任何效果。

    4 回复  |  直到 12 年前
        1
  •  2
  •   Kennethvr    16 年前

    这是您手机中的内容:

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

    背景图像在类标题中设置,以便您可以订购asc或desc

    我想唯一的解决办法就是尝试这样的方法

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

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

        2
  •  3
  •   Vegard Larsen Julie Lerman    16 年前

    使用以下CSS:

    thead th
    {
        padding-right: 20px;
    }
    

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

        3
  •  1
  •   quark    16 年前

    或者将其添加到您的CSS中:

    th.header {
        padding-right: 20px;
    }
    
        4
  •  0
  •   Rachel    12 年前

    我知道这是一个老问题,但当我遇到同样的问题时,我发现th上的填充或空白没有帮助。

    TableSorter在头中为您添加了一个DIV,您可以在DIV中添加右边距来解决问题。

    TableSorter使标题看起来如下:

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