带 img 的 CSS 列标题 - 如何将 img/div 停靠在右侧？答案

【问题标题】：CSS column header with img - how to dock img/div to the right?带 img 的 CSS 列标题 - 如何将 img/div 停靠在右侧？
【发布时间】：2010-10-02 19:53:03
【问题描述】：

我有一个 HTML 表格，用作网格视图的列标题。单击列标题会触发使网格视图排序的 javascript，并且显示列已排序的图标显示在列文本旁边，类似于以下：

|---------------------------------------------------------------------------------|
| <span> Column 1 </span> <div class="sortImgSprite" /> | <span> Column 2 </span> |
|---------------------------------------------------------------------------------|

表格有表格布局：固定，文本范围有溢出：隐藏，文本溢出：省略号，空白：nowrap。

当文本很长时，我确实得到了我想要的省略号效果，但是排序图标精灵（设置了宽度和背景的 div）被从表格单元格的右侧剪掉了。有什么建议可以通过 CSS 确保排序图标优先于省略文本的空间？如果一列是“排序的”，我希望排序 img 始终存在并且文本椭圆大小而不是文本将 img 推出单元格的可见空间：

【问题讨论】：

标签： css html-table cell ellipsis dock

【解决方案1】：

我不确定您要向图像添加什么浮动，但您是否尝试过向右浮动并添加大约 5 px 的右边距？那会把它推进去。

【讨论】：

一定要给一个 padding-right：等于图像的宽度，加上你希望图像具有的任何边距（左和右） .

【解决方案2】：

为什么不直接将“sortImgSprite”类添加到<span> 标记中呢？既然你是通过 JavaScript 进行排序，你必须有一个表列的句柄？

当用户对列进行排序时，将“sortImgSprite”类添加到左侧或右侧（如果需要，可以添加一点填充）并在该列不再排序时将其删除。

...还是我错过了什么？

啊。我错过了一些东西。认为溢出的文本在列标题下方的行中，而不是在标题本身中。

好的，那么如果您要将类添加到表头呢？您的 <th> 标签（如果您使用的是该标签）可以使图像与单元格右侧对齐，然后您的 <span> 标签可以继承该类并添加其他格式（例如文本溢出等）？

同样，您可能需要在 span 的右侧进行填充，以便在任何文本后面都可以清楚地看到表格标题单元格的背景图像。

【讨论】：

在这种情况下，如果字符串被浏览器转换为“...”，它可能会被吞掉（因为它太长了）。

【解决方案3】：

感谢您的建议！以下是我最终通过 CSS 获得我想要的东西：

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>

【讨论】：