如何将jQuery Datatables标题排序图标强制到单元格的最右侧或最左侧？

Question

默认情况下,列标题上的数据表排序图标显示在列标题文本下方.我希望它出现在标题单元格的同一行和最右侧或最左侧.

以下是其中一个列标题的HTML显示方式(在Firebug中).

<th class="ui-state-default" rowspan="1" colspan="1" style="width: 252px;">
    <div class="DataTables_sort_wrapper" style="text-align: left;">
        Account Name
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </div>
</th>

我display: inline-block;在css-right课堂上添加了<span>强制它出现在这里和这里提到的同一行.但是,我仍然无法找到如何强制图标出现在最右边或最左边.将图标添加float:left;或float:right;碰撞到下一行.

有任何想法吗？

Answer 1

对我来说table.display不存在,我补充说:

table.dataTable thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
}

table.dataTable thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;
}

以上对我有用.

Answer 2

虽然格雷格的回答引导我找到解决方案(并且是我接受的答案),但为了清晰起见,以及对可能遇到此问题的其他人的帮助,我正在添加我自己的答案.

最影响排序图标定位的是这个默认的DataTables CSS:

table.display thead th div.DataTables_sort_wrapper {
    padding-right: 20px;
    position: relative;
}

table.display thead th div.DataTables_sort_wrapper span {
    margin-top: -8px;
    position: absolute;
    right: 0;
    top: 50%;
}

如果该class="display"属性不在表中,则不应用上面的CSS.

Answer 3

我不知道这是不是最好的方法,但这是我在jQuery-UI DataTable中看到的那个符号:

从站点的主样式表(不是jQuery UI样式表的一部分):

.display thead th .DataTables_sort_wrapper span { float: right; }

从jQuery UI CSS文件:

.ui-icon { 
  display: block; 
  // ... some other stuff including overflow: hidden 
}

当然还有其他一些风格,但我认为那些是重要的.基于你的问题,我很惊讶它还没有为你工作.