Bootstrap 5-Tabelle

基础表格

一个基本的 Bootstrap 5 表格有一点内边距，以及水平分隔线。

.table 类为表格添加了基本样式：

Beispiel

Probieren Sie es selbst aus

条纹行

.table-striped 类将斑马条纹添加到表中：

Beispiel

Probieren Sie es selbst aus

带边框的表格

.table-bordered 类为表格和单元格的所有边添加边框：

Beispiel

Probieren Sie es selbst aus

有悬停效果的行

.table-hover 类在表格行上添加悬停效果（灰色背景色）：

Beispiel

Probieren Sie es selbst aus

黑色/深色表格

.table-dark 类为表格添加黑色背景：

Beispiel

Probieren Sie es selbst aus

深色条纹表格

结合 .table-dark 和 .table-striped 来创建深色的条纹表格：

Beispiel

Probieren Sie es selbst aus

可悬停的深色表格

.table-hover 类在表格行上添加悬停效果（灰色背景色）：

Beispiel

Probieren Sie es selbst aus

无边框表格

.table-borderless 从表格中删除边框：

Beispiel

Probieren Sie es selbst aus

Kontextklassen

Kontextklassen können verwendet werden, um die gesamte Tabelle (<table>) und Tabellenzeile (<tr>) oder Tabellenzelle (<td>) Farben.

Beispiel

Probieren Sie es selbst aus

Verfügbare Kontextklassen:

Klasse Beschreibung
.table-primary Blau: bedeutet eine wichtige Aktion.
.table-success Grün: bedeutet Erfolg oder positive Handlung.
.table-danger Rot: bedeutet Gefahr oder potenziell negative Handlung.
.table-info Hellblau: bedeutet eine neutrale Informationsänderung oder Aktion.
.table-warning Orange: bedeutet eine möglicherweise zu beachtende Warnung.
.table-active Grau: Setzt die Hover-Farbe für Tabellenzeilen oder Tabellenzellen an.
.table-secondary Grau: bedeutet eine weniger wichtige Aktion.
.table-light Hellgrau für Tabellen oder Tabellenzeilen-Hintergrund.
.table-dark Dunkelgrau für Tabellen oder Tabellenzeilen-Hintergrund.

Tabellenkopf-Farbe

Sie können auch jede Kontextklasse verwenden, um nur der Tabellenüberschrift eine Hintergrundfarbe hinzuzufügen:

Beispiel

Probieren Sie es selbst aus

Kleine Tabelle

.table-sm Die Klasse macht die Tabelle kleiner, indem sie den Zellenfüllung halbiert:

Beispiel

Probieren Sie es selbst aus

Responsive-Tabelle

.table-responsive Fügen Sie bei Bedarf eine Rollleiste zur Tabelle hinzu (wenn sie in der horizontalen Richtung zu groß ist):

Beispiel

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

Probieren Sie es selbst aus

Sie können auch bestimmen, wann die Tabelle eine Rollleiste erhalten sollte, abhängig von der Bildschirmbreite:

Klasse Bildschirmbreite
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Beispiel

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

Probieren Sie es selbst aus