HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- Tabellen

❮ Vorherige Nächste ❯

Bootstrap-Basistabelle

Ein einfacher Bootstrap-Tisch hat eine leichte Polsterung und nur horizontale Trennwände.

Die .tableKlasse fügt einer Tabelle grundlegende Stile hinzu:

Beispiel

Firstname Lastname Email
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 Email
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 Email
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 Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Zusammengefasste Tabelle

Die .table-condensedKlasse macht einen Tisch kompakter, indem die Zellpolsterung halbiert wird:

Beispiel

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Kontextbezogene Klassen

Kontextuelle Klassen können verwendet werden, um Tabellenzeilen ( <tr>) oder Tabellenzellen ( <td>) einzufärben:

Beispiel

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Die kontextabhängigen Klassen, die verwendet werden können, sind:

Klasse Beschreibung
.active Wendet die Hover-Farbe auf die Tabellenzeile oder Tabellenzelle an
.success Zeigt eine erfolgreiche oder positive Aktion an
.info Zeigt eine neutrale informative Änderung oder Aktion an
.warning Weist auf eine Warnung hin, die möglicherweise beachtet werden muss
.danger Weist auf eine gefährliche oder potenziell negative Aktion hin

Responsive Tabellen

Die .table-responsiveKlasse erstellt eine responsive Tabelle. Auf kleinen Geräten (unter 768px) scrollt die Tabelle dann horizontal. Bei der Anzeige auf etwas, das breiter als 768 Pixel ist, gibt es keinen Unterschied:

Beispiel

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

Testen Sie sich mit Übungen

Übung:

Fügen Sie ein Klassenattribut hinzu, um die Tabelle als einfache Bootstrap-Tabelle zu formatieren.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Vollständige Bootstrap-Tabellenreferenz

Eine vollständige Referenz aller Tabellenklassen finden Sie in unserer vollständigen Bootstrap-Tabellen-Referenz .


❮ Vorherige Nächste ❯