When using the jQUery DataTable plugin, I encountered an issue where the table header text and the image for sorting are not properly aligned.
Here is how it looks:
https://i.sstatic.net/Kqgz9.png (I want the arrow and the text to be aligned horizontally). How can I achieve this?
I have also uploaded the code to jsfiddle: http://jsfiddle.net/icyborg7/9DTcT/
HTML Code:
<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="contacts_table" rowspan="1" colspan="1" style="width: 73.7667px;" aria-sort="ascending" aria-label="S.No.: activate to sort column descending">
<div class="DataTables_sort_wrapper">S.No.<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
</div>
</th>
CSS Code:
.ui-state-default .ui-icon {
background-image: url("/assets_dev/jquery-ui/ui-icons_888888_256x240.png");
}
.ui-icon-triangle-1-n {
background-position: 0 -16px;
}
.ui-icon, .ui-widget-content .ui-icon {
background-image: url("/assets_dev/jquery-ui/ui-icons_222222_256x240.png");
}
.ui-icon {
height: 16px;
width: 16px;
}
.ui-icon {
background-repeat: no-repeat;
display: block;
overflow: hidden;
text-indent: -99999px;
}
* {
outline: medium none !important;
}