datatable jquery - table header width not aligned with body width

kishore picture kishore · Jun 21, 2013 · Viewed 120.9k times · Source

I am using jQuery datatables. When running the application, the header width is not aligned with the body width. But when I click on the header, it is getting aligned with the body width but even then there is some light misalignment. This problem occurs only in IE.

JSFiddle

This is how it looks when the page gets loaded:

enter image description here

After clicking on the header:

enter image description here

My datatable code:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates is my table id.
Could anyone help me with this? Thanks in advance.

Answer

Gyrocode.com picture Gyrocode.com · Sep 11, 2017

CAUSE

Most likely your table is hidden initially which prevents jQuery DataTables from calculating column widths.

SOLUTION

  • If table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.

    For example, for Bootstrap Collapse plugin:

    $('#myCollapsible').on('shown.bs.collapse', function () {
       $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
    });
    
  • If table is in the tab, you need to adjust headers when tab becomes visible.

    For example, for Bootstrap Tab plugin:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
       $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
    });
    

Code above adjusts column widths for all tables on the page. See columns().adjust() API methods for more information.

RESPONSIVE, SCROLLER OR FIXEDCOLUMNS EXTENSIONS

If you're using Responsive, Scroller or FixedColumns extensions, you need to use additional API methods to solve this problem.

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solutions to the most common problems with columns in jQuery DataTables when table is initially hidden.