datatable jquery - la largeur de l'en-tête du tableau n'est pas alignée sur celle du corps du tableau

Question

J'utilise jQuery datatables. Lors de l'exécution de l'application, la largeur de l'en-tête n'est pas alignée sur celle du corps. Mais lorsque je clique sur l'en-tête, il s'aligne sur la largeur du corps, mais même dans ce cas, il y a un léger désalignement. Ce problème ne se produit que dans IE.

JSFiddle

Voici à quoi cela ressemble lorsque la page est chargée :

Après avoir cliqué sur l'en-tête :

Mon code de table de données :

$("#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 est l'identifiant de ma table.
Quelqu'un peut-il m'aider ? Merci d'avance.

Answer 1

$('.DataTables_sort_wrapper').trigger("click") ;

Answer 2

Malheureusement, aucune de ces solutions n'a fonctionné pour moi. Peut-être, en raison de la différence dans l'initialisation de nos tables, nous avons des résultats différents. Il est possible que l'une de ces solutions fonctionne pour quelqu'un. Quoi qu'il en soit, je voulais partager ma solution, juste au cas où quelqu'un serait encore confronté à ce problème. C'est un peu bricolé, mais cela fonctionne pour moi, puisque je ne change pas la largeur du tableau par la suite.

Après avoir chargé la page et cliqué sur l'en-tête, de sorte qu'il s'étende et s'affiche normalement, j'inspecte l'en-tête du tableau et enregistre la largeur de l'élément .dataTables_scrollHeadInner div. Dans mon cas, c'est 715px par exemple. Puis ajoutez cette largeur à la css :

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

Answer 3

Ma solution était d'ajouter ceci : ...

initComplete () {
      this.api (). columns (). header (). each ((el, i) => {
          $ (el) .attr ('style', 'min-width: 160px;')
      });
},

...

et ça a l'air bien.

Answer 4

La réponse de Gyrocode.com au problème était tout à fait correcte mais sa solution ne fonctionnera pas dans tous les cas. Une approche plus générale consiste à ajouter ce qui suit en dehors de votre fonction document.ready :

$(document).on( 'init.dt', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
    window.setTimeout(function () {
            api.table().columns.adjust().draw();
        },1);
} );

Answer 5

Ajout d'une largeur fixe pour le tableau des conteneurs

JS :

otableCorreo = $("#indexTablaEnvios").DataTable({                
    "fnInitComplete": function (oSettings, json) {
        $(otableCorreo.table().container()).addClass("tablaChildren");
    },
});

CSS :

.tablaChildren {
    width: 97%;
}