Headers not lining up in Table - Have been fighting this for weeks

TyraelEldruin

Hey guys, I have a table that looks absolutely fine and seems to work okay when there are a lot of entries, but all the data in the center gets shifted away from the headers when there aren't a lot of entries.

Also, even though one version "looks" okay, if you stretch the window out, the headers still break and you see the same effect.

(Sort of) working:

http://i.imgur.com/Hg4IUCQ.png

Issue:

http://i.imgur.com/CdGvuTo.png

Code:

dtTable = $("#CompletedSitesTable").DataTable({
    "scrollY": "50vh",
    "scrollX": "auto",
    "paging": true,
    "pageLength": 100,
    "resizableColumns": true,
    "bScrollCollapse": true,
    "order": [[ 7, "asc" ]],
    "bScrollAutoCss": true,
    "responsive": true,
    dom: "Bfrtip",
    buttons: [
        'copy', 'excel',
        {
            extend: 'pdfHtml5',
            orientation: 'landscape',
        }
    ]
});

Something that used to fix it was setting bAutoWidth to true, but for some reason it's not working when I try it now. I'm really tired of fighting this bug and would appreciate some help.

Thanks in advance

TyraelEldruin

Well I wasn't sure I would get much response from this, but what I did was completely hacky.

On fnInitComplete I simply check to see if the datatable has a scrollbar and, if not, I set the width of the div to the width of the headers.

I guess you would change #resultsDiv to whatever your wrapper div was and

Function to check for scroll bar:

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

The fnInitComplete code.

"fnInitComplete": function(oSettings, json) {
    if(!$(".dataTables_scrollBody").hasScrollBar())
        $("#resultsDiv").css({ "width": $(".dataTable").width()});  
}

I guess this will get left like this for now - seems really dumb.