<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 "