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

Aucune des solutions ci-dessus n'a fonctionné pour moi, je vais donc poster ma solution : Je chargeais le tableau dans un div caché, puis j'affichais le div après la construction du tableau. Lorsque j'ai d'abord affiché/désaffiché la division, puis construit le tableau alors que la table était visible, cela a fonctionné.

DataTables ne peut donc pas dimensionner les colonnes dans un div caché, probablement parce qu'il obtient une largeur de colonne de 0px en arrière-plan lorsque le tableau est caché.

Answer 2

En reliant la réponse de Mike Ramsey, j'ai fini par découvrir que la table était initialisée avant que le DOM ne soit chargé.

Pour résoudre ce problème, j'ai placé la fonction d'initialisation à l'endroit suivant :

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);

Answer 3

Voir cette solution . Ce problème peut être résolu par un événement de défilement de la fenêtre qui ne se déclenche qu'une seule fois.

Answer 4

J'étais confronté au même problème. J'ai ajouté la propriété scrollX : true pour le dataTable et cela a fonctionné. Il n'est pas nécessaire de modifier le CSS de la table de données.

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });

Answer 5

Je sais que c'est vieux, mais je viens de rencontrer ce problème et je n'ai pas trouvé de bonne solution. J'ai donc décidé d'utiliser du js pour obtenir la hauteur du scrollBody, par rapport à la hauteur du tableau. Si le scrollBody est plus petit que le tableau, alors j'augmente la largeur du tableau de 15px pour tenir compte de la barre de défilement. J'ai également configuré cette fonction sur l'événement de redimensionnement, afin qu'elle fonctionne lorsque mon conteneur change de taille :

const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();

if (tableHeight > scrollBodyHeight) {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "calc(100% + 15px)",
    })
} else {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "100%",
    })
}