Datatables table header & column data misaligned when using "sScrollY"
I have fix this way;
wrap the table with div and
CSS
overflow:auto;
height: 400px;
position:relative;
Remove
- “sScrollY”
- "sScrollX"
I've had to delay when data is loaded because when page loads it does not see the scroll bar and table headers get misaligned. But if I delay it, it sees the scroll bar and the table header matches up perfect.
<button onclick="delayload('loadusers()')">Load Table</button>
function delayload(f){
setTimeout(f,50)
}
function loadusers() {
oTable = $('#userslist').dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"sScrollY": "150px",
"bAutoWidth" : true,
"bPaginate": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"sDom": '<"H"lfr>t<"F"<"useraccountbtn">>',
"aaData": datan,
"aoColumns": [
{ "mDataProp": "uid"},
{ "mDataProp": "fn" },
{ "mDataProp": "un" },
{ "mDataProp": "pw" },
{ "mDataProp": "em" },
{ "mDataProp": "ac" }
]
});
}