Bootstrap 5 Tables

Basis tabel

Een basis Bootstrap 5 tabel heeft een beetje binnenafstand en horizontale scheidingslijnen.

.table Voeg basisstijlen toe aan de tabel:

Voorbeeld

Probeer het zelf

Streeprijen

.table-striped Voeg zebra strepen toe aan de tabel:

Voorbeeld

Probeer het zelf

Gerandeerde tabel

.table-bordered Voeg randen toe aan alle kanten van de tabel en cel:

Voorbeeld

Probeer het zelf

Rijen met hover-effect

.table-hover Voeg een hover-effect toe aan de tabelrij (grijze achtergrondkleur):

Voorbeeld

Probeer het zelf

zwarte/donkere tabel

.table-dark Voeg een zwarte achtergrond toe aan de tabel:

Voorbeeld

Probeer het zelf

donkere gestreepte tabel

koppel .table-dark en .table-striped Maak een donkere gestreepte tabel:

Voorbeeld

Probeer het zelf

Hoverbare donkere tabel

.table-hover Voeg een hover-effect toe aan de tabelrij (grijze achtergrondkleur):

Voorbeeld

Probeer het zelf

Randloze tabel

.table-borderless Verwijder de randen van de tabel:

Voorbeeld

Probeer het zelf

Contextuele classes

Contextuele classes kunnen worden gebruikt om de hele tabel (<table>) en tabelrij (<tr>) of tabelcel (<td>) kleuren.

Voorbeeld

Probeer het zelf

Beschikbare contextuele classes:

Class Beschrijving
.table-primary Blauw: betekent een belangrijke actie.
.table-success Groen: betekent succes of een positieve actie.
.table-danger Rood: betekent gevaar of potentieel negatief gedrag.
.table-info Lichtblauw: betekent een neutrale informatie wijziging of actie.
.table-warning Oranje: betekent een waarschuwing die mogelijk opgemerkt moet worden.
.table-active Grijs: toepassen van hoverkleur op tabelrij of tabelcel.
.table-secondary Grijs: betekent een minder belangrijke actie.
.table-light Lichtgrijs voor tabel of tabelrij achtergrond.
.table-dark Donkergrijs voor tabel of tabelrij achtergrond.

Koptekstkleur

U kunt ook elke contextuele class gebruiken om alleen de achtergrondkleur van de tabelkop toe te voegen:

Voorbeeld

Probeer het zelf

Kleine tabel

.table-sm Class maakt een tabel kleiner door de celvulling te halveren:

Voorbeeld

Probeer het zelf

Responsieve tabel

.table-responsive Class voegt een scrollbar toe aan de tabel wanneer nodig (wanneer het horizontaal te groot is):

Voorbeeld

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

Probeer het zelf

U kunt ook beslissen wanneer een tabel een scrollbar moet krijgen, afhankelijk van de schermbreedte:

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

Voorbeeld

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

Probeer het zelf