Edit : Trying to repost , I wanted to edit my post but it got removed? Sorry if I broke any rules
Live test link: https://live.datatables.net/fimanapu/8/edit
Hi everyone,
I hope you're all doing well. I've been working with DataTables 1.11.5 and jQuery 3.5.1, and I've run into a bit of an issue with the column header alignment when the table is initially hidden and is rendered only after a click.
I'm trying to build the following structure:
- A bunch of accordions which show some group info
- On clicking the accordion, the group information is populated from DataTables
- The tables are initialized with serverSide processing and scrollX enabled
When an accordion section is expanded and the table becomes visible,the table header is NOT aligned with the table header
This seemed to be a common issue, so I tried searching the forum and found links to the bootstrap tabs example and how we would have to call columns.adjust() when our tables are hidden, but this does not work for me.
I think I have misunderstood something and maybe the way I am calling columns.adjust() is wrong, but I simply cannot get it to work. In my mind, it should work as the adjust call is made only after the table is rendered in drawCallback with a timeout (I have also added another call after I initialize just to be sure, but still it does not work).
I have attached a test link at the top which is a simpler table, but still showcases the key issue. Would really appreciate any help here cause man, this has been so hard 
Thanks in advance for your time and expertise!