title: How can I force the jQuery Datatables header sort icon to the far right or far left of the cell?
body: <p>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.</p>
  
  <p>Here's how the HTML for one of the column headers appears (in Firebug).</p>
  
  <pre><code>&lt;th class="ui-state-default" rowspan="1" colspan="1" style="width: 252px;"&gt;
      &lt;div class="DataTables_sort_wrapper" style="text-align: left;"&gt;
          Account Name
          &lt;span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>I added <code>display: inline-block;</code> to the <code>css-right</code> class on the <code>&lt;span&gt;</code> to force it to appear on the same line as mentioned <a href="http://datatables.net/forums/discussion/604/themeroller-sort-icons-render-on-separate-line/p1" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/5223660/jquery-datatables-sort-icons-put-on-row-below-the-actual-text">here</a>. However, I still can't find how to force the icon to appear on the far right or the far left. Adding <code>float:left;</code> or <code>float:right;</code> bumps the icon to the next line.</p>
  
  <p>Any ideas?</p>