Tische
Dokumentation und Beispiele für das Opt-in-Styling von Tabellen (aufgrund ihrer weit verbreiteten Verwendung in JavaScript-Plugins) mit Bootstrap.
Beispiele
Aufgrund der weit verbreiteten Verwendung von Tabellen in Drittanbieter-Widgets wie Kalendern und Datumsauswahlen haben wir unsere Tabellen so konzipiert, dass sie optional sind . Fügen Sie einfach die Basisklasse .table
zu einer beliebigen hinzu <table>
und erweitern Sie sie dann mit benutzerdefinierten Stilen oder unseren verschiedenen enthaltenen Modifikatorklassen.
Unter Verwendung des grundlegendsten Tabellen-Markups sehen Sie hier, wie .table
-basierte Tabellen in Bootstrap aussehen. Alle Tabellenstile werden in Bootstrap 4 geerbt , was bedeutet, dass alle verschachtelten Tabellen auf die gleiche Weise wie die übergeordnete Tabelle formatiert werden.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
Sie können die Farben auch umkehren – mit hellem Text auf dunklem Hintergrund – mit .table-dark
.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
Tischkopfoptionen
Verwenden Sie ähnlich wie bei Tabellen und dunklen Tabellen die Modifikatorklassen .thead-light
oder .thead-dark
, um <thead>
s hell- oder dunkelgrau erscheinen zu lassen.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
Gestreifte Reihen
Verwenden .table-striped
Sie diese Option, um jeder Tabellenzeile innerhalb der <tbody>
.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
Eingefasster Tisch
Fügen Sie .table-bordered
Rahmen auf allen Seiten der Tabelle und der Zellen hinzu.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
Randloser Tisch
Hinzufügen .table-borderless
für eine Tabelle ohne Rahmen.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
.table-borderless
auch auf dunklen Tischen einsetzbar.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
Schwebefähige Zeilen
Hinzufügen .table-hover
, um einen Hover-Status für Tabellenzeilen innerhalb einer <tbody>
.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
Kleiner Tisch
Fügen Sie hinzu .table-sm
, um Tische kompakter zu machen, indem Sie die Zellpolsterung halbieren.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry der Vogel |
Kontextbezogener Unterricht
Verwenden Sie kontextabhängige Klassen, um Tabellenzeilen oder einzelne Zellen einzufärben.
Klasse | Überschrift | Überschrift |
---|---|---|
Aktiv | Zelle | Zelle |
Standard | Zelle | Zelle |
Primär | Zelle | Zelle |
Sekundär | Zelle | Zelle |
Erfolg | Zelle | Zelle |
Achtung | Zelle | Zelle |
Warnung | Zelle | Zelle |
Die Info | Zelle | Zelle |
Licht | Zelle | Zelle |
Dunkel | Zelle | Zelle |
Normale Tabellenhintergrundvarianten sind mit der dunklen Tabelle nicht verfügbar, Sie können jedoch Text- oder Hintergrunddienstprogramme verwenden , um ähnliche Stile zu erzielen.
# | Überschrift | Überschrift |
---|---|---|
1 | Zelle | Zelle |
2 | Zelle | Zelle |
3 | Zelle | Zelle |
4 | Zelle | Zelle |
5 | Zelle | Zelle |
6 | Zelle | Zelle |
7 | Zelle | Zelle |
8 | Zelle | Zelle |
9 | Zelle | Zelle |
Bedeutung von Hilfstechnologien vermitteln
Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .sr-only
Klasse verborgen ist.
Erstellen Sie reaktionsschnelle Tabellen, indem Sie beliebige .table
mit umschließen .table-responsive{-sm|-md|-lg|-xl}
, sodass die Tabelle an jedem max-width
Haltepunkt von bis zu (aber nicht einschließlich) 576 Pixel, 768 Pixel, 992 Pixel bzw. 1120 Pixel horizontal scrollt.
Da Browser derzeit keine Bereichskontextabfragen unterstützen, umgehen wir die Einschränkungen von min-
und max-
Präfixen und Darstellungsfenstern mit gebrochenen Breiten (die beispielsweise unter bestimmten Bedingungen auf Geräten mit hoher Auflösung auftreten können), indem wir Werte mit höherer Genauigkeit für diese Vergleiche verwenden .
Bildunterschriften
A <caption>
funktioniert wie eine Überschrift für eine Tabelle. Es hilft Benutzern mit Screenreadern, eine Tabelle zu finden und zu verstehen, worum es geht, und zu entscheiden, ob sie sie lesen möchten.
# | Zuerst | Letzte | Handhaben |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
Responsive Tabellen
Responsive Tabellen ermöglichen ein einfaches horizontales Scrollen von Tabellen. Machen Sie jede Tabelle in allen Ansichtsfenstern reaktionsfähig, indem Sie a .table
mit umschließen .table-responsive
. Oder wählen Sie einen maximalen Haltepunkt aus, bis zu dem eine reaktionsschnelle Tabelle verwendet werden soll, indem Sie verwenden .table-responsive{-sm|-md|-lg|-xl}
.
Vertikales Abschneiden/Abschneiden
Responsive Tabellen verwenden overflow-y: hidden
, wodurch alle Inhalte abgeschnitten werden, die über die unteren oder oberen Ränder der Tabelle hinausgehen. Dies kann insbesondere Dropdown-Menüs und andere Widgets von Drittanbietern abschneiden.
Immer ansprechbar
Verwenden Sie über jeden Haltepunkt hinweg, um .table-responsive
Tabellen horizontal zu scrollen.
# | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift |
---|---|---|---|---|---|---|---|---|---|
1 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
2 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
3 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
Breakpoint-spezifisch
Verwenden Sie .table-responsive{-sm|-md|-lg|-xl}
es nach Bedarf, um responsive Tabellen bis zu einem bestimmten Haltepunkt zu erstellen. Ab diesem Haltepunkt verhält sich die Tabelle normal und scrollt nicht horizontal.
Diese Tabellen können unterbrochen erscheinen, bis ihre ansprechenden Stile bei bestimmten Darstellungsbereichsbreiten angewendet werden.
# | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift |
---|---|---|---|---|---|---|---|---|
1 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
2 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
3 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
# | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift |
---|---|---|---|---|---|---|---|---|
1 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
2 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
3 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
# | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift |
---|---|---|---|---|---|---|---|---|
1 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
2 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
3 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
# | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift | Überschrift |
---|---|---|---|---|---|---|---|---|
1 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
2 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |
3 | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle | Zelle |