DataTables header and body misalignment issue when scrollX or scrollY is used
DataTables header and body misalignment issue when scrollX or scrollY is used
Below is my table definition. I have also tried to adjust columns by table.columns.adjust().draw(); But with no luck. Please help.
$('#table').DataTable({
"scrollY": 350,
"scrollX": "100%",
"scrollCollapse": true,
"scroller": true,
"autoWidth": false
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @Luthfa ,
The problem is because you've disabled
autoWidth, which stops the column width handling. If you leave that enabled, as in this example (with all your settings present), it works as expected.Cheers,
Colin
Hi @colin Even If I leave autoWidth as enabled then also I am getting misalignment between header and body.

Please suggest any other solution
Hi @Luthfa ,
We're happy to take a look, but the best thing to progress this would be for you to provide a link to your page or to modify my example to demonstrate the problem.
Cheers,
Colin
This is fixed now. Added fixed width for image column.