Bootstrap 5 taulukot

Perus taulukko

Perus Bootstrap 5 -taulukko sisältää hieman sisätilaa ja horisontaalista erotinta.

.table Lisää perusmuotoilu taulukkoon:

Esimerkki

Kokeile itse

Raidalliset rivit

.table-striped Lisää savuviivat taulukkoon:

Esimerkki

Kokeile itse

Reunaviivat taulukko

.table-bordered Lisää reunaviivat taulukon ja solujen kaikkiin reunoihin:

Esimerkki

Kokeile itse

Hiirenliikkeen vaikutus sisältää rivit

.table-hover Lisää hiirenliikkeen vaikutus taulukon riveihin (harmaa taustaväri):

Esimerkki

Kokeile itse

Musta/sininen taulukko

.table-dark Lisää musta tausta taulukkoon:

Esimerkki

Kokeile itse

Tumma raidallinen taulukko

Yhdistä .table-dark Ja .table-striped Luo tumma raidallinen taulukko:

Esimerkki

Kokeile itse

Hiirenliikkeen vaikutus sisältää tumman taulukon

.table-hover Lisää hiirenliikkeen vaikutus taulukon riveihin (harmaa taustaväri):

Esimerkki

Kokeile itse

Reunaviivatonta taulukkoa

.table-borderless Poista reunaviivat taulukosta:

Esimerkki

Kokeile itse

kontekstiluokat

Kontekstiluokat voidaan käyttää koko taulukon (<table>)、taulukkorivi (<tr>) tai taulukkosolmu (<td>) värjäys.

Esimerkki

Kokeile itse

Käytettävissä olevat kontekstiluokat:

Luokka Kuvaus
.table-primary Sininen: Merkitsee tärkeää toimintaa.
.table-success Vihreä: Merkitsee menestystä tai positiivista toimintaa.
.table-danger Punainen: Merkitsee vaaraa tai mahdollisesti kielteistä toimintaa.
.table-info Vaalean sininen: Merkitsee neutraalia tietojen muutosta tai toimintaa.
.table-warning Oranssi: Merkitsee mahdollisesti huomattavaa varoitusilmausta.
.table-active Harmaa: Sovelletaan osoitettu väri taulukkoriveihin tai soluihin.
.table-secondary Harmaa: Merkitsee vähemmän tärkeää toimintaa.
.table-light Vaalea harmaa taulukko tai taulukkorivin tausta.
.table-dark Tumma harmaa taulukko tai taulukkorivin tausta.

Otsikkoväri

Voit myös käyttää mitä tahansa kontekstiluokkaa lisätäksesi taustavärin vain taulukkopäähän:

Esimerkki

Kokeile itse

Pieni taulukko

.table-sm Luokka tekee taulukosta pienemmän jakamalla solujen täyttöä puoliksi:

Esimerkki

Kokeile itse

Vastauskykyinen taulukko

.table-responsive Luokka lisää pyörrelevyn taulukkoon tarvittaessa (kun se on liian leveä horisontaalisesti):

Esimerkki

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

Kokeile itse

Voit myös päättää, milloin taulukko saa pyörrelevyksen, riippuen näytön leveydestä:

Luokka Näytön leveys
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Esimerkki

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

Kokeile itse