DataTable headers misaligned with its contents on load

Pugalendhi

I am using datatable plugin to display some data from database. On loading, the datatable displays the data as shown in the attached image (table.png), where the column lines of the headers are misplaced when compared to the table contents. But if I move to the next page in the grid the grid headers become properly aligned with the table contents. Now I want to display the grid headers aligned with the table contents on grid load.

Any help would be appreciated. Thanks!

zapkingdude

I am too facing the same problem, i tried DOM placements but no luck, if any one faced it and cleared it please share the solution in here, it will be a lot more helpful to us. Thanks in advance.

allan

My guess is that the table is initialised hidden - you need to call the columns.adjust() method when the table is made visible to correct the alignment.

If that isn't the issue, then, per the forum rules, we'd need a link to the page showing the issue.

Allan

zapkingdude

Thanks for the help @Allan,
Once I've added the following options, the problem got solved.

"autoWidth": true,
"sScrollX": "50%",
"bScrollCollapse": true,
"sScrollY": "100%",

Thank you for your time and help