Table drawn with header and body misaligned

mayconfsbrito

I'm trying to draw a table with datatables 1.9.4, but the header and body are misaligned. This is my first work with this wonderful tool, and because this I don't know where to start.

I have a template in my aplication where I need to display the table, and I can't change this display.

Below, in the link we have an example with the table inside the template.
http://jsfiddle.net/mayconfsbrito/faJkw/10/

Thanks.

allan

Your fiddle shows the output from DataTables after scrolling is applied (presumably a copy and paste from the generated HTML) - but we need to know the input to be able to offer any help.

ALlan

mayconfsbrito

Thank you allan. I updated the Fiddle changing the the HTML code, but in this way the problem still didn't occur.

In my system, when the header and body are displayed misalign, when I changed the search input the below message was showed and the table was resized correctly.

"DataTables warning (table id = 'tabelainfo'): The table cannot fit into the current element which will cause column misalignment. The table has been drawn at its minimum possible width."

Ps: I'm changing the Fiddle until reproduce the problem.

allan

I can only guess that you are initialising the table hidden, and need to use fnAdjustColumnSizing ( `columns.adjust()` in 1.10) when it is made visible.

Allan

mayconfsbrito

Partially solved my problem, the columns are set but the header is still misaligned. Actually there is a headers.adjust ()?

allan

> headers.adjust ()?

Not by that name - that is basically what columns.adjust() is: http://next.datatables.net/reference/api/columns.adjust()

The other thing to check is that you don't have `border-collapse: collapse` set in your CSS.

Allan