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>

Randloser Tisch

Hinzufügen .table-borderlessfür eine Tabelle ohne Rahmen.

# Zuerst Letzte Handhaben
1 Markieren Otto @mdo
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
<table class="table table-borderless">
  <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>

.table-borderlessauch auf dunklen Tischen einsetzbar.

# Zuerst Letzte Handhaben
1 Markieren Otto @mdo
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
<table class="table table-borderless 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.

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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Ü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 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Ü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 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Ü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 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>