datatable jquery - table header width not aligned with body width

Question

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:

After clicking on the header:

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 1

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.

• If you're using Responsive extension, you need to call responsive.recalc() API method in addition to columns().adjust() API method. See Responsive extension – Incorrect breakpoints example.

• If you're using Scroller extension, you need to call scroller.measure() API method instead of columns().adjust() API method. See Scroller extension – Incorrect column widths or missing data example.

• If you're using FixedColumns extension, you need to call fixedColumns().relayout() API method in addition to columns().adjust() API method. See FixedColumns extension – Incorrect column widths example.

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.