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

Le problème est que la table de données est appelée avant que la table de données ne soit dessinée sur le DOM, utilisez la fonction "set time out" avant d'appeler la table de données.

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

Answer 2

N'ont pas besoin de trouver diverses béquilles, la largeur de l'en-tête du tableau n'est pas alignée avec le corps, parce que le tableau n'a pas eu assez de temps pour remplir les données pour cela, faire setTimeout

   setTimeout(function() {
     //your datatable code 
  }, 1000);

Answer 3

Comme l'a dit Gyrocode.com, "il est fort probable que votre tableau soit initialement caché, ce qui empêche jQuery DataTables de calculer la largeur des colonnes".

J'ai eu ce problème aussi et je l'ai résolu en mettant en place le dataTable après avoir affiché la div.

Par exemple

$('#my_div').show();
$('#my_table').DataTable();

Answer 4

Lorsque le défilement est activé dans les DataTables à l'aide des paramètres scrollX ou scrollY, le tableau entier est divisé en deux ou trois éléments de tableau HTML individuels : l'en-tête, le corps et, éventuellement, le pied de page. Cette opération a pour but de permettre le défilement des différentes sections du tableau de données d'un navigateur à l'autre.

Dans mon cas, je voulais avoir une barre de défilement horizontale car le contenu défile vers la droite. L'ajout du paramètre "scrollX" a donc créé ce problème dans certaines des pages qui ont plus de colonnes.

Le code ci-dessous enroule un div autour du DataTable avec le style "overflow as auto". Nous devons ajouter un div lorsque la DataTable a terminé son exécution. Nous pouvons le faire comme ci-dessous :

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

Si vous utilisez les options scrollX, scrollY, scrollXInner ou sScrollXInner, supprimez-les. Elles peuvent causer des problèmes.

Source : http://sforsuresh.in/datatables-header-body-not-aligned

Answer 5

Aucune des solutions ci-dessus n'a fonctionné pour moi, mais j'ai fini par trouver une solution qui a fonctionné.

Ma version de ce problème a été causée par un fichier CSS tiers qui a défini le "box-sizing" à une valeur différente. J'ai pu résoudre le problème sans affecter les autres éléments avec le code ci-dessous :

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

J'espère que cela aidera quelqu'un !