Header and body will not align after hide the left sidebar
Header and body will not align after hide the left sidebar

Hi,
I'm using datatables to show some data on page, and I have a left sidebar. If i click to hide the left sidebar it will cause the table header and body misaligned, the body can be resized but not on the header.
below is my configuration:
let table = $('#my_table').DataTable( {
destroy: true,
paging: false,
searching: true,
ordering: false,
info: true,
fixedHeader: false,
autoWidth: false,
scrollX: true,
scrollY: 500
} );
i found some solutions online like add the event of '$($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();', but they does not work.
How can i set the header and body resized and aligned after hiding the left sidebar.
Thank you for your help.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin