Bootstrap 5 tabeller

Grundläggande tabell

En grundläggande Bootstrap 5-tabell har något inre marginal, samt horisontella skiljelinjer.

.table Lägg till grundläggande stil till tabellen:

Exempel

Prova själv

Streckrad

.table-striped Lägg till zebra-strecker till tabellen:

Exempel

Prova själv

Tabell med kantlinjer

.table-bordered Lägg till kantlinjer till alla kanter på tabell och celler:

Exempel

Prova själv

Rader med hover-effekt

.table-hover Lägg till en hover-effekt (grå bakgrundsfärg) på tabellraden:

Exempel

Prova själv

Svart/dark tabell

.table-dark Lägg till en svart bakgrund till tabellen:

Exempel

Prova själv

mörk striped tabell

kombinera .table-dark och .table-striped För att skapa en mörk striped tabell:

Exempel

Prova själv

Mörk tabell med hover-effekt

.table-hover Lägg till en hover-effekt (grå bakgrundsfärg) på tabellraden:

Exempel

Prova själv

Tabell utan kantlinjer

.table-borderless Radera kantlinjer från tabellen:

Exempel

Prova själv

kontextuella klasser

Kontextuella klasser kan användas för att färga hela tabellen (<table>) och tabellrad (<tr>) eller tabellcell (<td>) färgning.

Exempel

Prova själv

Tillgängliga kontextuella klasser:

Klass Beskrivning
.table-primary Blått: indikerar en viktig åtgärd.
.table-success Grön: indikerar framgång eller positiv åtgärd.
.table-danger Röd: indikerar fara eller potentiellt negativt beteende.
.table-info Ljust blått: indikerar neutral information eller operation.
.table-warning Orange: indikerar en varning som kan behöva uppmärksamhet.
.table-active Grå: applicerar hover-färg på tabellrad eller tabellcell.
.table-secondary Grå: anger en mindre viktig åtgärd.
.table-light Ljust grå tabell eller tabellrad bakgrund.
.table-dark Mörkgrå tabell eller tabellrad bakgrund.

Rubrikfärg

Du kan också använda några kontextuella klasser för att endast lägga till bakgrundsfärg till tabellrubriken:

Exempel

Prova själv

Liten tabell

.table-sm Klassen gör tabellen mindre genom att halvera cellfyllningen:

Exempel

Prova själv

Responsiv tabell

.table-responsive Lägg till en rullningslist till tabellen vid behov (när den är för stor i horisontell riktning):

Exempel

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

Prova själv

Du kan också bestämma när en tabell bör få en rullningslist, beroende på skärmens bredd:

Klass Skärmens bredd
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Exempel

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

Prova själv