Bootstrap 5 tabeller

Grundlæggende tabel

En grundlæggende Bootstrap 5 tabel har lidt indre margen og horisontale skillelinjer.

.table Tilføj grundlæggende stil til tabellen med klasse:

Eksempel

Prøv det selv

Streberækker

.table-striped Tilføj zebrastryg til tabellen med klasse:

Eksempel

Prøv det selv

Kantlinjeløs tabel

.table-bordered Tilføj kantlinjer til tabellen og alle celler:

Eksempel

Prøv det selv

Rækker med museoverfladeeffekt

.table-hover Tilføj museoverfladeeffekt (grå baggrundsfarve) til tabellens rækker:

Eksempel

Prøv det selv

Sort/dyb tabel

.table-dark Tilføj sort baggrund til tabellen med klasse:

Eksempel

Prøv det selv

mørk stribet tabel

kombiner .table-dark og .table-striped Opret en mørk stribet tabel:

Eksempel

Prøv det selv

Hoverbar over mørk tabel

.table-hover Tilføj museoverfladeeffekt (grå baggrundsfarve) til tabellens rækker:

Eksempel

Prøv det selv

Kantlinjeløs tabel

.table-borderless Fjern kantlinjer fra tabellen:

Eksempel

Prøv det selv

kontekstklasser

Kontekstklasser kan bruges til at farvelægge hele tabellen (<table>) eller tabelrække (<tr>) eller tabelcelle (<td>) farvelægning.

Eksempel

Prøv det selv

Tilgængelige kontekstklasser:

Klasser Beskrivelse
.table-primary Blå: repræsenterer vigtige handlinger.
.table-success Grøn: repræsenterer succes eller positive handlinger.
.table-danger Rød: repræsenterer fare eller potentielle negative handlinger.
.table-info Lysblå: repræsenterer neutrale informationændringer eller handlinger.
.table-warning Orange: repræsenterer advarsler, der kan være vigtige at bemærke.
.table-active Grå: anvender museoverførselsfarve til tabelrækker eller tabelceller.
.table-secondary Grå: repræsenterer mindre vigtige handlinger.
.table-light Lysgrå tabel eller tabelrække baggrund.
.table-dark Mørkegrå tabel eller tabelrække baggrund.

Tabeloverskriftsfarve

Du kan også bruge enhver kontekstklasse kun til at tilføje baggrundsfarve til tabeloverskriften:

Eksempel

Prøv det selv

Lille tabel

.table-sm Klasser gør tabellen mindre ved at halvere cellefyldningen:

Eksempel

Prøv det selv

Responsiv tabel

.table-responsive Klasser tilføjer en rullemeni til tabellen, når det er nødvendigt (når den er for bred i den horisontale retning):

Eksempel

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

Prøv det selv

Du kan også beslutte, hvornår tabellen skal få en rullemeni, afhængigt af skærmens bredde:

Klasser Skærmbredde
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Eksempel

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

Prøv det selv