显示带有排序指示符的省略号答案

【问题标题】：Show ellipsis with sort indicator显示带有排序指示符的省略号
【发布时间】：2012-06-27 16:38:56
【问题描述】：

In my fiddle 我有三个示例说明如何在表头上显示排序指示符。

我的问题在第三列。当我缩小到省略号时，排序指示器隐藏在 Chrome 中，而在 IE 中它位于文本顶部。

铬

在显示省略号（类似于第二列）时，有没有办法让排序指示器与标题保持一致并保持可见？

我尝试将指示器拆分为自己的跨度，但我似乎无法让带有标题的跨度折叠。

【问题讨论】：

你有没有考虑过使用这个：quocity.com/colresizable ?
@AlexW - 我以前见过这种事情，但此时不需要重新调整列大小。不过感谢您提供的链接，这可能对未来的项目有用。

标签： html css

【解决方案1】：

对我来说，这在 IE 中似乎比在 Chrome 中更明显。解决此问题的一种方法可能是使用 CSS content 属性并将排序指示器移到该属性中，然后从 .indicator-right 类中删除背景图像。

jsFiddle example

CSS

.indicator-right:after {
    content:url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
}

【讨论】：

很有趣，我一定会玩这个主意！但是，如果可能的话，我希望指示器在折叠时保持可见（当显示省略号时）。如果有的话，这似乎标准化了浏览器之间的行为。