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

datatables

Solution

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

Problem

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.

Original source