html - positioning in table by adding font for sorting -

html - positioning in table by adding font for sorting -

what proper way accomplish right position of font sorting words of column title becomes more two. here sample of table:

html:

<thead> <tr> <th class="sortable"> <div> <span>name</span> <span class="icons unsorted"></span> </div> </th> <th cliass="sortable"> <dv> <span>testifying experience</span> <span class="icons unsorted"></span> </div> </th> </tr> </thead>

css:

thead th { font-size: 13px; background: #1797c0; padding: 3px 0; vertical-align: middle; } thead th div { display: inline-block; }

before, i'm using span without putting them within div , setting th relative position , span unsorted icon absolute, works 1 word , not more 1 word.

i figured out. instead of using span , add together class font icon: <span class="icons unsorted"></span>, used background-image , background-position: center right 8px won't impact font icon positioning whenever have more 1 word column title.

see demo.

html css