Bootstrap datatables tab - responsive width/thead

[iKyzu]

I have page with multiple tabs, when loading the home page (main) everything is fine, but when switching between tabs and showing datatable the width of the titles/thead is not aligned with the content. Clicking again on the same tab fixes the problem. I have attached couple articles I found describing my problem.

When switching the tabs I made a quick fix:
('a[data-toggle="tab"]').on("shown.bs.tab click", function() { setTimeout(() => $($.fn.dataTable.tables(true)).DataTable().columns.adjust(), 200); });

Which works while switching the tab from one to another, but when I am inside one tab and the hashtag of the URL is getting refreshed and the page is loading and landing on the tab page, the thead is again not aligned I need to click again on the tab to align it correctly. I spend countless hours trying different methods, reading about this issue and how to fix it.

I couldn't make this work, so I decided to search for help online.

datatable-jquery-table-header-width-not-aligned-with-body-width
datatables-with-jquery-tabs-column-header-size-changed

[AllanJard]

Please link to a test case showing the error so we can offer help.

[iKyzu]

I manage to fix this issue different way 👍