Bootstrap 4 Tabellen
Bootstrap 4 Basic-Tabelle
Ein einfacher Bootstrap 4-Tisch hat eine leichte Polsterung und horizontale Trennwände.
Die .tableKlasse fügt einer Tabelle grundlegende Stile hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Gestreifte Reihen
Die .table-stripedKlasse fügt einer Tabelle Zebrastreifen hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Eingefasster Tisch
Die .table-borderedKlasse fügt Rahmen auf allen Seiten der Tabelle und der Zellen hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Zeilen bewegen
Die .table-hoverKlasse fügt Tabellenzeilen einen Hover-Effekt (graue Hintergrundfarbe) hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Schwarzer/dunkler Tisch
Die .table-darkKlasse fügt der Tabelle einen schwarzen Hintergrund hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Dunkel gestreifter Tisch
Kombiniere .table-darkund .table-stripedum einen dunklen, gestreiften Tisch zu erstellen:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Schwebebarer dunkler Tisch
Die .table-hoverKlasse fügt Tabellenzeilen einen Hover-Effekt (graue Hintergrundfarbe) hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Randloser Tisch
Die .table-borderlessKlasse entfernt Rahmen aus der Tabelle:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kontextbezogene Klassen
Kontextuelle Klassen können verwendet werden, um die gesamte Tabelle ( <table>), die Tabellenzeilen ( <tr>) oder Tabellenzellen ( <td>) einzufärben.
Beispiel
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Die kontextabhängigen Klassen, die verwendet werden können, sind:
| Klasse | Beschreibung |
|---|---|
.table-primary |
Blau: Zeigt eine wichtige Aktion an |
.table-success |
Grün: Zeigt eine erfolgreiche oder positive Aktion an |
.table-danger |
Rot: Weist auf eine gefährliche oder potenziell negative Aktion hin |
.table-info |
Hellblau: Zeigt eine neutrale informative Änderung oder Aktion an |
.table-warning |
Orange: Zeigt eine Warnung an, die möglicherweise beachtet werden muss |
.table-active |
Grau: Wendet die Hover-Farbe auf die Tabellenzeile oder Tabellenzelle an |
.table-secondary |
Grau: Zeigt eine etwas weniger wichtige Aktion an |
.table-light |
Hellgrauer Tabellen- oder Tabellenzeilenhintergrund |
.table-dark |
Dunkelgrauer Tabellen- oder Tabellenzeilenhintergrund |
Tischkopffarben
Die .thead-darkKlasse fügt Tabellenüberschriften einen schwarzen Hintergrund hinzu, und die .thead-lightKlasse fügt Tabellenüberschriften einen grauen Hintergrund hinzu:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kleiner Tisch
Die .table-smKlasse macht den Tisch kleiner, indem sie die Zellpolsterung halbiert:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Responsive Tabellen
Die .table-responsiveKlasse fügt der Tabelle bei Bedarf eine Bildlaufleiste hinzu (wenn sie horizontal zu groß ist):
Beispiel
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Sie können auch entscheiden, wann die Tabelle je nach Bildschirmbreite einen Scrollbalken erhalten soll:
| Klasse | Bildschirmbreite |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
Beispiel
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>