web-dev-qa-db-de.com

So zentrieren Sie den Kopfzeilen von Datatables

Ich bin neu in Bezug auf Datentabellen. Wenn ich einen Tabellenheader erstelle, bleibt er immer links ausgerichtet. Wie kann ich den Kopf auf zentriert einstellen? Ich habe datatables.net/manual/styling/classes und datatables.net/reference/option/columns gelesen .className, weiß aber noch nicht, wie es implementiert werden soll.

$('.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"
    }
  }
});
7
wildashfihana

Nachdem Sie die Klasse angegeben haben, haben Sie möglicherweise vergessen, dass Sie Folgendes in CSS hinzufügen müssen:

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

Wenn die Klasse nicht zum <th> der Tabelle hinzugefügt wurde, fügen Sie das folgende CSS für generisches Material hinzu:

thead, th {text-align: center;}

/* OR */

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

Um es für eine bestimmte Tabelle spezifisch zu machen, können Sie der Tabelle einen id="tableID" geben und dann im CSS Folgendes tun:

#tableID thead,
#tableID th {text-align: center;}

Sie können dies mit CSS tun. Verwenden Sie einfach Ihre Tabellenklasse als Selektor und zielen Sie wie folgt auf jede Tabellenüberschrift innerhalb dieses Selektors: 

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

OP, Sie waren der Lösung sehr nahe, es fehlte nur die Option targets in columnDefs, um die dt-head-center-Klasse dem Header zuzuweisen, den Sie formatieren möchten.

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

CSS ist eine Option, aber nicht notwendig. 

Ich mag die von DataTables vorgeschlagene Methode der Verwendung der column.className-Option für das Styling von Zellen und wende sie dann mit targets an. https://datatables.net/reference/option/columns.className Dies gibt uns eine feinere Kontrolle als bei einer globalen CSS-Anwendung. 

Dadurch werden Header- und Body-Inhalt individuell ausgerichtet:

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 ] }
]

oder beide gleichzeitig ausrichten:

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

Zellklassenformat:

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

Weitere Informationen zu DataTables-Zellklassen: https://datatables.net/manual/styling/classes#Cell-classes

1
carbonspace

mit diesem Stil:

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

Ich kann die center-all-Klasse zu meiner Tabelle hinzufügen, und alles wird mittig ausgerichtet. so was :

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

Auf diese Weise habe ich die Möglichkeit, den Inhalt einiger Tabellen zu zentrieren, ohne ihn auf die gesamte Seite/Site anwenden zu müssen

1
Amer Sawan