blocks|key|3521253|text|这是现在你的单元格中的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3521254|<th+class="header">Last+Name</th>|code-block|syntax|javascript|3521255|背景图像是在类头中设置的，因此您可以排序asc或desc|3521256|我想唯一的解决办法就是尝试这样的方式|3521257|<th+class="header">
<div+style="margin-right:+10px;">Last+Name</div>
</th>|3521258|这样，你的图片就会一直在标题的右边，希望这对你有所帮助。|3521259|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

This is what is in your cell now:

<pre><code>&lt;th class="header"&gt;Last Name&lt;/th&gt;
</code></pre>

The background image is set in the class header so you can order asc or desc

I guess the only solution is to try something like this

<pre><code>&lt;th class="header"&gt;
&lt;div style="margin-right: 10px;"&gt;Last Name&lt;/div&gt;
&lt;/th&gt;
</code></pre>

in this way your image will always be on the right hand side of your title
hope this helps

blocks|key|3521281|text|或者直接添加到你的css中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3521282|th.header+{
++++padding-right:+20px;
}|code-block|syntax|javascript|3521283|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

or just add this to your css:

<pre><code>th.header {
 padding-right: 20px;
}
</code></pre>

blocks|key|1014613|text|使用以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014614|thead+th
{
++++padding-right:+20px;
}|code-block|syntax|javascript|1014615|这通过在图像所在的位置创建一个“空白”空间来解决问题。|1014616|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use the following CSS:

<pre><code>thead th
{
 padding-right: 20px;
}
</code></pre>

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

blocks|key|303946|text|我知道这是一个古老的问题，但当我遇到同样的问题时，我发现填充或页边距并没有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|303947|Tablesorter会在标题中添加一个div，您可以在div中添加右边界来解决这个问题。|303948|表排序程序使标题看起来像这样：|303949|<th+data-column="2"+class="tablesorter-header">
++++<div+class="tablesorter-header-inner">Header+Text+Here</div>
</th>|code-block|syntax|javascript|303950|所以我把这个css放到div上：|303951|table.tablesorter+thead+tr+th+.tablesorter-header-inner+{
++++margin-right:+15px;
}|303952|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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.

The tablesorter makes the headers look like this:

<pre><code>&lt;th data-column="2" class="tablesorter-header"&gt;
 &lt;div class="tablesorter-header-inner"&gt;Header Text Here&lt;/div&gt;
&lt;/th&gt;
</code></pre>

So onto the div I put this css:

<pre><code>table.tablesorter thead tr th .tablesorter-header-inner {
 margin-right: 15px;
}
</code></pre>

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.

For an example, go here: <a href="http://tablesorter.com/docs/" rel="nofollow noreferrer">http://tablesorter.com/docs/</a> and then shrink the browser until the up/down arrows are behind the text of the Age column. I have a similar thing happening. 

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. 

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

CSS Table Cell Background Image Text Overlap

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用Tablesorter Jquery插件对表进行排序，但是样式表中指定的图像背景图像落后于列中的文本，在这些列中，列的实际内容不够长，无法使列宽度超出标题文本的长度。例如，转到此处：，然后缩小浏览器，直到向上/向下箭头位于年龄列文本的后面。我也有类似的事情发生。我可以将列的宽度硬编码为足够宽，但我更希望在CS...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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