web-dev-qa-db-fra.com

Comment centrer l'en-tête de datatables

Je suis nouveau sur datatables. Quand je crée un en-tête de tableau, il est toujours aligné à gauche . Comment définir l'en-tête centré sur l'alignement? J'ai lu datatables.net/manual/styling/classes et datatables.net/reference/option/columns .className mais vous ne savez toujours pas comment l'implémenter.

$('.table').DataTable({
  "paging": true,
  "lengthChange": true,
  "searching": true,
  "ordering": true,
  "info": true,
  "language": {
    "url": "http://cdn.datatables.net/plug-ins/1.10.9/i18n/Indonesian.json"
  }
  "columnDefs": {
    {
      className: "dt-head-center"
    }
  }
});
jqueryhtmlcssdatatables
7
wildashfihana

Vous avez peut-être oublié après avoir spécifié la classe, vous devez ajouter les éléments suivants en CSS:

.dt-head-center {text-align: center;}

De plus, si la classe n'a pas été ajoutée au <th> du tableau, essayez d'ajouter le code CSS ci-dessous pour les commandes génériques:

thead, th {text-align: center;}

/* OR */

.table thead,
.table th {text-align: center;}

Pour le rendre spécifique à une table particulière, vous pouvez lui donner un id="tableID" puis dans le CSS, vous pouvez faire:

#tableID thead,
#tableID th {text-align: center;}
6
Praveen Kumar Purushothaman

Vous pouvez le faire avec CSS. Utilisez simplement votre classe de table comme sélecteur et ciblez chaque en-tête de table à l'intérieur de ce sélecteur, comme ceci: 

.table th {
  text-align: center;
}
2
Ricky

OP, vous étiez très proche de la solution, il manquait simplement l'option targets dans columnDefs pour affecter la classe dt-head-center à l'en-tête que vous souhaitez styler.

// apply to columns 1 & 2
targets: [ 0, 1 ]

CSS est une option mais pas nécessaire. 

J'aime la méthode suggérée par DataTables d'utiliser l'option column.className pour le style des cellules, puis de les appliquer à l'aide de targets. https://datatables.net/reference/option/columns.className Ceci nous donne un niveau de contrôle plus précis par opposition à une application CSS globale. 

Cela alignera individuellement le contenu de l'en-tête et du corps:

columnDefs: [
    // Center align the header content of column 1
   { className: "dt-head-center", targets: [ 0 ] },
   // Center align the body content of columns 2, 3, & 4
   { className: "dt-body-center", targets: [ 1, 2, 3 ] }
]

ou alignez les deux en même temps:

columnDefs: [
   // Center align both header and body content of columns 1, 2 & 3
   { className: "dt-center", targets: [ 0, 1, 2 ] }
]

Format de classe de cellule:

dt[-head|-body][-left|-center|-right|-justify|-nowrap]

Plus d'informations sur les classes de cellules DataTables: https://datatables.net/manual/styling/classes#Cell-classes

1
carbonspace

en utilisant ce style:

table.center-all td,th{
    text-align :center;
}

Je peux ajouter la classe center-all à ma table et tout sera aligné au centre. comme ça :

<table class="center-all">
    ....
</table

De cette façon, j'ai la possibilité de centrer le contenu de certains tableaux sans avoir à l'appliquer à l'ensemble de la page/du site.

1
Amer Sawan