Bootstrap 4 Tafels

Bootstrap 4 basistabel

Een basic Bootstrap 4 tafel heeft een lichte bekleding en horizontale verdelers.

De .tableklasse voegt een basisstijl toe aan een tabel:

Gestreepte rijen

De .table-stripedklas voegt zebrastrepen toe aan een tabel:

Begrensde tafel

De .table-borderedklasse voegt randen toe aan alle kanten van de tabel en cellen:

Beweeg rijen

De .table-hoverklasse voegt een zweefeffect (grijze achtergrondkleur) toe aan tabelrijen:

Zwart/donkere tafel

De .table-darkklasse voegt een zwarte achtergrond toe aan de tabel:

Donker gestreepte tafel

Combineer .table-darken .table-stripedcreëer een donkere, gestreepte tafel:

Zweefbare donkere tafel

De .table-hoverklasse voegt een zweefeffect (grijze achtergrondkleur) toe aan tabelrijen:

Randloze tafel

De .table-borderlessklasse verwijdert randen van de tabel:

Contextuele lessen

Contextuele klassen kunnen worden gebruikt om de hele tabel ( <table>), de tabelrijen ( <tr>) of tabelcellen ( <td>) te kleuren.

De contextuele klassen die kunnen worden gebruikt zijn:

Kleuren tafelhoofd

De .thead-darkklasse voegt een zwarte achtergrond toe aan tabelkoppen en de .thead-lightklasse voegt een grijze achtergrond toe aan tabelkoppen:

Kleine tafel

De .table-smklasse maakt de tabel kleiner door de celopvulling in tweeën te snijden:

Responsieve tabellen

De .table-responsiveklasse voegt indien nodig een schuifbalk toe aan de tabel (wanneer deze horizontaal te groot is):

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