Headers losing relationship to their column when loaded as display:none

rauls4

I am making a single window app that loads 4 tables, however, I only need to display one table at a time, unless I load all of them with display not set to none the headers on those that were hidden gets all out go whack.

Here is a picture: https://dl.dropboxusercontent.com/u/11235/headersIssue.png

Any ideas?

allan

So the problem here is basically that you have scrolling enabled and the table hidden when initialised. This is a problem for DataTables because it splits the table into the header and body components so the body can scroll - for that to look correctly visually it needs to sync the size of the columns for the two tables. The problem with that is that the tables are hidden and therefore have no dimensions!

The way to address this is to use the fnAdjustColumnSizing API method. Call it on the table when it is made visible.

There is an example of using that method with jQuery UI tabs here: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

Regards,
Allan

rauls4

Thanks again Allan!