Search code examples
jquerydatatablesalignment

datatable jquery - table header width not aligned with body width

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?

Solution

  • Found the solution :

    Added table-layout:fixed to the table. And opened the application in IE mode.