Column alignment when data table is rendered while hidden

ericwelsh

Hi folks,
I'm hoping this is a easy js or css fix. but I have two data tables on a page of which each are in there own tab. by default one of the tables is present and visible on page load and renders perfectly- however the second table ( which is on a non- active tab ) does not. The second table renders all the basic elements and data fine however the columns are all squished to the left side and no longer aligned with the data and only fix them selves after the table column is click to sort.
As seen in the attached image.

Any suggestions?
Thanks
Eric

ericwelsh

Ah never mind.. Dug some more and found i was missing a some logic according to the following documentation

https://datatables.net/examples/api/tabs_and_scrolling.html

This example shows how DataTables with scrolling can be used together with Bootstrap tabs (or indeed any other method whereby the table is in a hidden, display:none, element when it is initialised).

The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.