Datatables table header & column data misaligned when using "sScrollY" - datatables

Question

Having problems with my table header becoming misaligned when I use "sScrollY". The header realigns itself only after I sort a certain column by clicking on one of the headers.
Misaligned.
Corrected only After I click on a sort header.
My Setting:
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" }
]
});
I've also tried fnAdjustColumnSizing() which every Google Search seems to be suggesting but it doesn't do anything for me.

Answer 1

I have fix this way;
wrap the table with div and
CSS
overflow:auto;
height: 400px;
position:relative;
Remove
“sScrollY”
"sScrollX"

Answer 2

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" }
]
});
}

Answer 3

I had to remove the scrolling manually, because nothing else worked. Then I used #Suresh Kamrushi 's answer to make an external scrolling div
Here's the code if anyone needs it :)
//replace all scroll-related divs with their content (aka unwrap the content)
$('.table-responsive').replaceWith($('.table-responsive').html());
$('.dataTables_scroll').replaceWith($('.dataTables_scroll').html());
$('.dataTables_scrollHead').replaceWith($('.dataTables_scrollHead').html());
$('.dataTables_scrollBody').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_scrollHeadInner').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_sizing').each(function (index, value) {
$(this).replaceWith($(this).html());
});
//Re-size the header
$('#table_view_subs thead tr').attr("style","height:37.6px");
//add external scroll div
$("#table_view_subs").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
It's very hacky, but if you've lost a week and your patience trying to get the DataTable to behave, you're not gonna care

Answer 4

Well, whenever you sort or filter and the contents of the table change in some way, fnDraw gets called. If an extra fnDraw is working (via clicking your sorting header after the table has loaded), and it isn't tied to bServerSide then trying an extra call to oTable.fnDraw() couldn't hurt.

Answer 5

Using ScrollX or scrollY create such problems. there is a work around for it:
$('#userslist').DataTable({
"initComplete": function (settings, json) {
$("#reportDetails").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
First remove ScrollX or scrollY if you have in your page and add above code to fix it.

Answer 6

Try this:
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();

Answer 7

I also had problems with ScrollX.
With wide tables it is a very big help. With narrow tables, as in the problem case above, I also had the same problem.
The problem arises because 3 tables are also made in one table. One for the header, one for the data and one for the footer.
The data part has the correct width. The header and footer are too short, so I enlarged them using CSS:
// Scroll-X
DIV.dataTables_scrollHeadInner,
DIV.dataTables_scrollFootInner{
min-width: 100%;
}
DIV.dataTables_scrollHeadInner > TABLE,
DIV.dataTables_scrollFootInner > TABLE{
min-width: 100%;
}