DataTables header and body misalignment issue when scrollX or scrollY is used

Luthfa

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
    });

colin

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

Luthfa

Hi @colin Even If I leave autoWidth as enabled then also I am getting misalignment between header and body.
Please suggest any other solution

colin

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

Luthfa

This is fixed now. Added fixed width for image column.