datatable jquery: el ancho del encabezado de la tabla no está alineado con el ancho del cuerpo

Estoy usando tablas de datos jQuery. Al ejecutar la aplicación, el ancho del encabezado no está alineado con el ancho del cuerpo. Pero cuando hago clic en el encabezado, se alinea con el ancho del cuerpo, pero incluso entonces hay una ligera desalineación. Este problema ocurre solo en IE.

JSFiddle

Así es como se ve cuando se carga la página:

Después de hacer clic en el encabezado:

Mi código de tabla de datos:

$("#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 es mi id de mesa.
¿Podría alguien ayudarme con esto? Gracias por adelantado.

Resolví este problema envolviendo la tabla “dataTable” con un div con overflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

y agregando este JS después de su dataTable inicialización:

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

no usar sScrollX o sScrollYelimínelos y agregue un div envoltorio usted mismo que hace lo mismo.

Lo arreglé, Trabaja para mí.

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

O

var table = $('#example').DataTable();
table.columns.adjust().draw();

Referencia: https://datatables.net/reference/api/columns.adjust()

Usa estos comandos

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });

el problema es que se llama a la tabla de datos antes de que la tabla de datos se dibuje en DOM, use el tiempo de espera establecido antes de llamar a la tabla de datos.

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);