DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

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

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

TyraelEldruinTyraelEldruin Posts: 5Questions: 1Answers: 0
edited March 2017 in Free community support

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

Answers

  • TyraelEldruinTyraelEldruin Posts: 5Questions: 1Answers: 0

    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.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.