ScrollX Option Misaligning Table Headers

SickPuP

Test Case: https://jsfiddle.net/ddelella/3ybe1x4m/1/

Issue: I know this has been discussed in the forum numerous times but none of the proposed solutions is working in the latest version of datatables.net. My website has a modal window that contains a table. This table need to be responsive with the modal. We opted to not use the child rows and responsive plugin in favor of horizontal scrolling. The scrolling of the main data works fine. However, the initial load of the table has misaligned headers.

I understand that the scrollX breaks the table into two. However, like previous forum posts the issue appears to be the calculation of width for the wrapper around the header. It is populating the initial width as 0px causing the header to left align.

WEIRD FACT: Opening the browser developer tools with F12 causes the table calculate the proper width and re-align the headers. Not 100% sure why, possibly a resize command is sent to the window.

allan

You are initialising the DataTable while it is hidden. You need to call columns.adjust() when the table is made visible.

This example is applicable. It uses Bootstrap tabs rather than a modal, but the essence is the same. When the Modal's shown event is triggered you need to call columns.adjust().

The reason for this is that when the modal is hidden it has no height or width, so the column width calculations can't operate. Only when it is visible will those calculations be possible.

Allan

allan

Not 100% sure why, possibly a resize command is sent to the window.

Exactly that. Likewise if you click to sort a column header, it will spring into shape.

Allan