Dokumentation und Beispiele für das Opt-in-Styling von Tabellen (aufgrund ihrer weit verbreiteten Verwendung in JavaScript-Plugins) mit Bootstrap.
Auf dieser Seite
Überblick
Aufgrund der weit verbreiteten Verwendung von <table>Elementen in Drittanbieter-Widgets wie Kalendern und Datumsauswahlen sind Bootstrap-Tabellen Opt-in . Fügen Sie die Basisklasse .tablezu einem beliebigen <table>hinzu und erweitern Sie sie dann mit unseren optionalen Modifikatorklassen oder benutzerdefinierten Stilen. Alle Tabellenstile werden in Bootstrap nicht geerbt, was bedeutet, dass alle verschachtelten Tabellen unabhängig vom übergeordneten Stil gestaltet werden können.
Unter Verwendung des grundlegendsten Tabellen-Markups sehen Sie hier, wie .table-basierte Tabellen in Bootstrap aussehen.
#
Zuerst
Letzte
Handhaben
1
Markieren
Otto
@mdo
2
Jacob
Dornton
@fett
3
Larry der Vogel
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Varianten
Verwenden Sie kontextabhängige Klassen, um Tabellen, Tabellenzeilen oder einzelne Zellen einzufärben.
Klasse
Überschrift
Überschrift
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
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
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 .visually-hiddenKlasse verborgen ist.
Akzentuierte Tische
Gestreifte Reihen
Verwenden .table-stripedSie diese Option, um jeder Tabellenzeile innerhalb der <tbody>.
#
Zuerst
Letzte
Handhaben
1
Markieren
Otto
@mdo
2
Jacob
Dornton
@fett
3
Larry der Vogel
@twitter
<tableclass="table table-striped">
...
</table>
Diese Klassen können auch Tabellenvarianten hinzugefügt werden:
Wir beginnen damit, den Hintergrund einer Tabellenzelle mit der --bs-table-bgbenutzerdefinierten Eigenschaft festzulegen. Alle Tabellenvarianten legen dann diese benutzerdefinierte Eigenschaft fest, um die Tabellenzellen einzufärben. Auf diese Weise geraten wir nicht in Schwierigkeiten, wenn halbtransparente Farben als Tabellenhintergründe verwendet werden.
Dann fügen wir den Tabellenzellen einen eingefügten Rahmenschatten hinzu, indem wir eine box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Schicht über einer beliebigen angegebenen background-color. Da wir eine große Ausbreitung und keine Unschärfe verwenden, wird die Farbe monoton sein. Da --bs-table-accent-bges standardmäßig nicht gesetzt ist, haben wir keinen Standard-Box-Schatten.
Wenn entweder .table-striped, .table-hoveroder .table-activeKlassen hinzugefügt werden, --bs-table-accent-bgwird die auf eine halbtransparente Farbe gesetzt, um den Hintergrund einzufärben.
Für jede Tischvariante generieren wir --bs-table-accent-bgabhängig von dieser Farbe eine Farbe mit dem höchsten Kontrast. Beispielsweise ist die Akzentfarbe für .table-primarydunkler, während .table-darksie eine hellere Akzentfarbe hat.
Text- und Rahmenfarben werden auf die gleiche Weise generiert und ihre Farben werden standardmäßig vererbt.
Tabellenzellen von <thead>sind immer vertikal nach unten ausgerichtet. Tabellenzellen <tbody>erben ihre Ausrichtung von <table>und sind standardmäßig oben ausgerichtet. Verwenden Sie die vertikalen Ausrichtungsklassen , um bei Bedarf neu auszurichten.
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Diese Zelle erbt vertical-align: middle;von der Tabelle
Diese Zelle erbt vertical-align: middle;von der Tabelle
Diese Zelle erbt vertical-align: middle;von der Tabelle
Dies hier ist ein Platzhaltertext, der ziemlich viel vertikalen Platz einnehmen soll, um zu demonstrieren, wie die vertikale Ausrichtung in den vorhergehenden Zellen funktioniert.
Diese Zelle erbt vertical-align: bottom;von der Tabellenzeile
Diese Zelle erbt vertical-align: bottom;von der Tabellenzeile
Diese Zelle erbt vertical-align: bottom;von der Tabellenzeile
Dies hier ist ein Platzhaltertext, der ziemlich viel vertikalen Platz einnehmen soll, um zu demonstrieren, wie die vertikale Ausrichtung in den vorhergehenden Zellen funktioniert.
Diese Zelle erbt vertical-align: middle;von der Tabelle
Diese Zelle erbt vertical-align: middle;von der Tabelle
Diese Zelle ist nach oben ausgerichtet.
Dies hier ist ein Platzhaltertext, der ziemlich viel vertikalen Platz einnehmen soll, um zu demonstrieren, wie die vertikale Ausrichtung in den vorhergehenden Zellen funktioniert.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Verschachtelung
Rahmenstile, aktive Stile und Tabellenvarianten werden nicht von verschachtelten Tabellen geerbt.
Um zu verhindern, dass Stile in verschachtelte Tabellen gelangen, verwenden wir den untergeordneten Kombinator ( >)-Selektor in unserem CSS. Da wir auf alle tds und ths in thead, tbody, und abzielen müssen tfoot, würde unser Selektor ohne sie ziemlich lang aussehen. Daher verwenden wir den ziemlich seltsam aussehenden .table > :not(caption) > * > *Selektor, um alle tds und ths der .table, aber keine potenziell verschachtelten Tabellen anzusprechen.
Beachten Sie, dass, wenn Sie <tr>s als direkte untergeordnete Elemente einer Tabelle hinzufügen, diese standardmäßig <tr>in a <tbody>eingeschlossen werden, sodass unsere Selektoren wie beabsichtigt funktionieren.
Anatomie
Tischkopf
Verwenden Sie ähnlich wie bei Tabellen und dunklen Tabellen die Modifikatorklassen .table-lightoder .table-dark, um <thead>s hell- oder dunkelgrau erscheinen zu lassen.
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.
Liste der Benutzer
#
Zuerst
Letzte
Handhaben
1
Markieren
Otto
@mdo
2
Jacob
Dornton
@fett
3
Larry der Vogel
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Sie können das auch mit <caption>auf den Tisch legen .caption-top.
Liste der Benutzer
#
Zuerst
Letzte
Handhaben
1
Markieren
Otto
@mdo
2
Jacob
Dornton
@fett
3
Larry
der Vogel
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Responsive Tabellen
Responsive Tabellen ermöglichen ein einfaches horizontales Scrollen von Tabellen. Machen Sie jede Tabelle in allen Ansichtsfenstern reaktionsfähig, indem Sie a .tablemit 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|-xxl}.
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-responsiveTabellen horizontal zu scrollen.
Verwenden Sie .table-responsive{-sm|-md|-lg|-xl|-xxl}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.
Die Faktorvariablen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) dienen zur Bestimmung des Kontrasts in Tabellenvarianten.
Abgesehen von den hellen und dunklen Tischvarianten werden Themenfarben durch die $table-bg-levelVariable aufgehellt.