Table header width not aligned with body width

Karl53

I'm having a problem getting the table headers to align over the columns when a table is initialized in a DOM node that is hidden - specifically within a tabbed interface when the table is on a hidden panel. The header tds have their widths set to 0 within the style attribute. I assume this is due to a parent container's width being unknown.

I tried resolving this problem by calling:

table.columns.adjust().draw()

after the table is visible with no luck.

I've also tried the answers found to this stackoverflow question to no avail.

Is there an accepted method to get the column headers to resize themselves so that they are the same width as the table columns?

This seems to be a matter of some interest since the above SO question has over 67,000 views and was active as recently as today.

Thanks.

colin

Hi @Karl53 ,

That'll be down to your CSS, which is impossible to diagnose without seeing it. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Karl53

Colin,

Thank you for your reply. live.datatables.net is a great tool. I did not know it existed.

Here's a test case.

The point is after the table is made visible the headers do not align correctly and a call to columns.adjust() has no impact. Is there another method call that will fix this?

This happens with or without the columns having a predefined width. Further, I don't think it has anything to do with the css.

allan

It seems to work okay with columns.adjust(): http://live.datatables.net/qitosoza/3/edit .

Allan

Karl53

Allan, You're right, columns.adjust() does work with the example. But calling it still does not solve the problem in my code. I'll try to modify the example to see where the problem is.