Header does not aligning with body after container resizing

Gabriel23

I have a dataTable inside a div and I will refer to it as container. I have a sidebar on left and user can hide or show the sidebar. As default the sidebar is shown but as user hides the sidebar , container increases size (width ) and results in an increase of table body but not the header, cause it has a fixed width. How can I find a way to properly align header with body?
Below will paste some code:

      $("#myGrid").DataTable({
                "scrollY": '410',
                "scrollX": true,
                "destroy": true,
                "order": [],
                "autoWidth": true,
                "paging": false,
                "bInfo": false
    })

As you notice header is another table , so just typing in css width:100% of the table will indeed have the same size as the body table but columns will not be aligned with header.

Gabriel23

Solved

craigiemk

What was your solution?

Gabriel23

Calling systematically this function
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
As I don't have any informations about your code and what you want to achieve, it's up to you to decide where should the above code should be called