How can I force the jQuery Datatables header sort icon to the far right or far left of the cell?

Question

The Datatables sort icon, on column headers, by default appears under the column header text. I'd like to have this appear on the same line and on the far right side or far left side of the header cell.

Here's how the HTML for one of the column headers appears (in 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>

I added display: inline-block; to the css-right class on the <span> to force it to appear on the same line as mentioned here and here. However, I still can't find how to force the icon to appear on the far right or the far left. Adding float:left; or float:right; bumps the icon to the next line.

Any ideas?

Answer 1

For me table.display did not exist, I added the following:

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;
}

The above worked for me.

Answer 2

Though Greg's answer lead me to the solution (and is the answer I accepted), for clarity, and as a help to others that might run into this issue, I'm adding my own answer.

What most affects the positioning of the sort icons is this default 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%;
}

If the class="display" attribute is not on the table, the CSS above is not applied.