DataTable Render with ScrollY (table body gets size, but thead doesn't change)

Question

am using datatables and also adding ScrollY to it ... so when I have many columns that my screen cannot fit into all this, it will just add vertical scrolling in the form of datatables .... and adminlte has a problem , which can hide and show the sidebar, and it changes the general data area, and as a result, it will look wrong:

my table body gets resized but thead doesn't get resized

This is a test link to my temporary page https://htmlpreview.imtqy.com/?https://github.com/farazGreen/DataTable/blob/master/GreenBow_%20TEST.html

The same question was asked by another person on the ADMINLTE website https://github.com/almasaeed2010/AdminLTE/issues/1136

Answer 1

Try adding autoWidthtofalse

$('#example').dataTable( {
  "autoWidth": false
} );

Or you can resize()table at window resize event

$(window).resize(function () {
            $("#example").resize();
});

Edit

On my local computer, this code only works with add "autoWidth": falseand removes scrollYor"scrollY":""

$('#tblOpWaiting').DataTable({
    "bFilter" : false,
    "ordering" : false,
    "scrollY" : "",
    "scrollCollapse" : true,
    responsive : true,
    "paging" : false,
    autoWidth:false
});
$('#tblOpConsulted').DataTable({
    "bFilter" : false,
    "ordering" : false,
    "scrollY" : "",
    "scrollCollapse" : true,
    responsive : true,
    "paging" : false,
    autoWidth:false
});