Source

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 .tablezu 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	@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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	@twitter

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tischkopfoptionen

Verwenden Sie ähnlich wie bei Tabellen und dunklen Tabellen die Modifikatorklassen .thead-lightoder .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	@twitter

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Eingefasster Tisch

Fügen Sie .table-borderedRahmen auf allen Seiten der Tabelle und der Zellen hinzu.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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		@twitter

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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		@twitter

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

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

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyKlasse verborgen ist.

Erstellen Sie reaktionsschnelle Tabellen, indem Sie beliebige .tablemit umschließen .table-responsive{-sm|-md|-lg|-xl}, sodass die Tabelle an jedem max-widthHaltepunkt 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.

Liste der Benutzer
#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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}.

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.

#	Ü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

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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.

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>