Addition of vertical scroll bar causes the header to be resized

damianc

When a vertical scroll bar is added to my dataTable it causes the header to be resized so that the last column has the width of the scroll bar subtracted from its overall width.
This can be fixed by simply clicking on the column header and it resizes to the correct size again.

I looked through the forum before asking this question and I found a similar issue in http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment

From reading this question it appears that this is fixed in version 1.10 release. I am using the 1.10.7 release but I am still getting the issue.

I have tried the fix(mentioned in the above question):

After many hours working on this, I found a solution adding the code below to the end of the fnDrawCallback :

//remove the inline-style 'width' from #myTable
$('#myTable').attr('style', $('#myTable').attr('style').replace(/width[^;]+;?/g, ''));

//retrieve the real width of #myTable and set it to the table header and its container
$('#myTable').closest('.dataTables_scroll').find('.dataTables_scrollHeaderInner, .dataTables_scrollHeaderInner > table.dataTable').css('width', $('#myTable').innerWidth()+'px');

This does fix the issue initially but when the page is resized the issue appears again. I have tried to add the fix to the window resize function but this does not seem to fix the issue.

Any help to solve this issue would be greatly appreciated.