After add scrollY option, header column no longer align with body content, is anyone know why ?

weihan123

I have seen through alot of post but still cant any post which can help me on this

First pic, you can actually see the table header and body is misaligned

Second pic, when i key in something in search textbox or click on header, it is actually aligned back ....just wonder why

Hope someone can help me, been struggling for few hours

kthorngren

Based on the screenshot it looks like you are using bootstrap. It also looks like you have conflicting Datatables CSS files (duplicate sorting icons). Looks like you are loading both jquery.dataTables.min.css and dataTables.bootstrap.min.css. You should only load one and in the case of Bootstrap styling it should be dataTables.bootstrap.min.css.

You can look at this example to see the appropriate files. Click on the CSS tab to see the CSS files. This doc explains more:
https://datatables.net/manual/styling/bootstrap

The easiest way to get the appropriate files is to use the Download Builder.

Correcting this should help.

If your Datatable is hidden when initialized you may need columns.adjust() when the Datatable becomes visible.

Also make sure you style="width:100%" on your table tag as shown in this [example[(https://datatables.net/examples/basic_init/flexible_width.html).

If these don't help then we will need to have a link to your page or a test case to help troubleshoot.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin