jQuery Datatables Header Misaligned With Vertical Scrolling

Question

I\'ve posted this in the datatables.net forums, but after a week, still no response. Hopefully I can find help here...

I\'m using datatables version 1.8.1 and am ha

Answer 1

I know this is quite old thread, but I landed here when searching for the header alignment issue. Turned out I needed a different solution, so posting here so that someone will find it useful.

I just added following in my style block and it solved the issue:

.table {table-layout:auto !important;}

Seems that Datatables adds fixed layout, so adding this line made my headers align correctly with data when scrolling

Answer 2

I had the problem and it turned out to be a side effect with my CSS. Try to disable all external css and see if the problem persists.

Answer 3

var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );

Answer 4

I use bootstrap and I managed with this

<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
     <thead></thead>
     <tbody></tbody>
</table>

Answer 5

I had this problem with bootstrap 3 and the problem was related to left and right padding on my th and td elements that I added after the bootstrap styling was applied. Removing my left and right padding fixed the problem in my case.

Answer 6

if you are using bootstrap:

.table {
    width: 100%;
    max-width: none; // >= this is very important
}