Question

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

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

表格有table-layout：fixed，文本的span有溢出：hidden，text-overflow：省略号，white-space：nowrap。

当文本很长时，我会得到我想要的省略号效果，但排序图标精灵（带有宽度和背景设置的div）会从表格单元格的右侧剪切掉。有关如何通过CSS确保排序图标优先于椭圆化文本的空间的任何建议吗？如果列是“已排序”，我希望排序img始终存在并且使用文本ellipsize而不是文本将img推出单元格的可见空间：

Answer 1

我不确定你添加到图像中的是什么浮动，但你是否尝试向右浮动并添加约5像素的右边距？这会把它推进去。

Answer 2

为什么不将“sortImgSprite”类添加到<span>标记中呢？既然你正在通过JavaScript进行排序，那么你必须拥有表列的句柄吗？

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

......或者我错过了什么？

阿。我错过了什么。认为溢出的文本位于列标题下方的行中，而不是标题本身。

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

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

Answer 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>

带有img的CSS列标题 - 如何将img / div停靠在右边？

3 个答案: