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

Je me rends compte qu'il existe déjà de nombreuses réponses, mais je n'en ai pas vu une qui utilisait l'option de titre de la bibliothèque elle-même. Vous pouvez définir les données de chaque colonne, puis définir une propriété de titre, qui rendra correctement les en-têtes. Dans ce cas, tout ce dont vous avez besoin est une déclaration HTML de table sans rien à l'intérieur (pas d'élément th). Il n'est pas nécessaire d'utiliser des CSS ou des JS supplémentaires.

itemsTable = $('#itemsTable').DataTable({
    "ajax": {
        "url": "/getItemData",
        "dataSrc": ""
    },
    "columns": [
        {data: "itemNumber", title: "Item #" },
        {data: "author", title: "Author" },
        {data: "title", title: "Title" },
        {data: "genre", title: "Genre" },
        {data: "publisher", title: "Publisher" }
    ]
});

Answer 2

À partir de cette réponse

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

à

setTimeout(function () {
        var table = $('#example').DataTable();
        table.columns.adjust().draw();
    }, 3000);

pour travailler !!!!

Answer 3

Un simple css sur les en-têtes devrait le faire pour vous.

#rates_info, #rates_paginate
{
    float: left;
    width: 100%;
    text-align: center;
}

Je ne peux pas promettre que cela fonctionnera tel quel car je n'ai pas vu votre html mais essayez-le et si cela ne fonctionne pas, vous pouvez poster votre html et je le mettrai à jour.

Answer 4

Si votre tableau ou la division contenant le tableau est initialement caché, rendez d'abord cette division visible, puis dessinez le tableau.