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

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