Table header width not aligned with body width

Table header width not aligned with body width

Karl53Karl53 Posts: 72Questions: 29Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • Karl53Karl53 Posts: 72Questions: 29Answers: 0
    edited November 2018

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

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

    Allan

  • Karl53Karl53 Posts: 72Questions: 29Answers: 0
    edited November 2018

    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.

This discussion has been closed.