Neueste Web-Entwicklung Tutorials
 

Bootstrap CSS Tabellen Referenz


<table> Klassen

Verwenden Sie die folgenden Klassen jede Tabelle zu formatieren:

Klasse Beschreibung Beispiel
.table Fügt grundlegende Styling (leichte Polsterung und nur horizontal Teiler) für jede <table> Versuch es
.table-striped Fügt Zebra-Striping auf jede Tabellenzeile innerhalb <tbody> (nicht verfügbar in IE8) Versuch es
.table-bordered Fügt Rand auf allen Seiten des Tisches und Zellen Versuch es
.table-hover Aktiviert einen Schwebezustand auf Tabellenzeilen innerhalb eines <tbody> Versuch es
.table-condensed Macht Tabelle kompakter durch Schneiden Zellenpolsterung in zwei Hälften Versuch es
Die Kombination aller Tabellenklassen Versuch es

<tr>, <th> und <td> Klassen

Verwenden Sie die Klassen unten Farbtabellenzeilen oder Zellen:

Klasse Beschreibung Beispiel
.active Wendet die Hover-Farbe auf eine bestimmte Zeile oder Zelle Versuch es
.success Zeigt einen erfolgreichen oder positive Wirkung Versuch es
.info Weist auf eine neutrale informative Änderung oder Aktion Versuch es
.warning Weist auf eine Warnung, die Aufmerksamkeit benötigen Versuch es
.danger Weist auf eine gefährliche oder potentiell negative Handlung Versuch es

Responsive Tabellen

Die .table-responsive Klasse erstellt eine ansprechende Tabelle. Die Tabelle wird dann horizontal scrollen auf kleinen Geräten (unter 768px). Wenn auf etwas größer als 768px breit sehen, gibt es keinen Unterschied:

Beispiel

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
Versuch es selber "