in English

Taulukot

Dokumentaatio ja esimerkkejä taulukoiden valinnaisesta tyylistä (koska niitä käytetään yleisesti JavaScript-laajennuksissa) Bootstrapin avulla.

Tällä sivulla

Yleiskatsaus

Koska <table>elementtejä käytetään laajasti kolmannen osapuolen widgeteissä, kuten kalentereissa ja päivämäärävalitsimissa, Bootstrapin taulukot ovat valinnaisia . Lisää perusluokka .tablemihin tahansa luokkaan <table>ja laajenna sitten valinnaisilla muokkausluokilla tai mukautetuilla tyyleillä. Kaikki taulukkotyylit eivät periydy Bootstrapissa, mikä tarkoittaa, että kaikki sisäkkäiset taulukot voidaan muotoilla ylätasosta riippumatta.

Kun käytät yksinkertaisinta taulukkomerkintää, näin .table-pohjaiset taulukot näyttävät Bootstrapissa.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Vaihtoehdot

Käytä kontekstuaalisia luokkia taulukoiden, taulukon rivien tai yksittäisten solujen värittämiseen.

Luokka	Otsikko	Otsikko
Oletus	Cell	Cell
Ensisijainen	Cell	Cell
Toissijainen	Cell	Cell
Menestys	Cell	Cell
Vaara	Cell	Cell
Varoitus	Cell	Cell
Tiedot	Cell	Cell
Kevyt	Cell	Cell
Tumma	Cell	Cell

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .visually-hiddenluokan mukana piilotettu lisäteksti.

Aksentoidut taulukot

Raidalliset rivit

Käytä .table-stripedlisätäksesi seepraraidan mille tahansa taulukon riville <tbody>.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-striped">
  ...
</table>

Nämä luokat voidaan myös lisätä taulukkomuunnelmiin:

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-dark table-striped">
  ...
</table>

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-success table-striped">
  ...
</table>

Liikkuvat rivit

Lisää .table-hoverottaaksesi hiiritilan käyttöön taulukon riveillä <tbody>.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-hover">
  ...
</table>

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-dark table-hover">
  ...
</table>

Nämä leijuttavat rivit voidaan yhdistää myös raidalliseen varianttiin:

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-striped table-hover">
  ...
</table>

Aktiiviset pöydät

Korosta taulukon rivi tai solu lisäämällä .table-activeluokka.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Miten muunnelmat ja aksentoidut taulukot toimivat?

Aksentoiduissa taulukoissa ( raidalliset rivit , leijuttavat rivit ja aktiiviset taulukot ) käytimme joitain tekniikoita saadaksemme nämä tehosteet toimimaan kaikissa taulukkoversioissamme :

Aloitamme asettamalla taulukon solun taustan --bs-table-bgmukautetulla ominaisuudella. Kaikki taulukkoversiot määrittävät tämän mukautetun ominaisuuden värittämään taulukon solut. Näin emme joudu vaikeuksiin, jos pöydän taustana käytetään puoliläpinäkyviä värejä.
Sitten lisäämme taulukon soluihin upotetun laatikon varjon, jonka avulla kerromme box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);minkä tahansa määritetyn solun päälle background-color. Koska käytämme valtavaa leviämistä eikä epäterävyyttä, väri on yksitoikkoinen. Koska --bs-table-accent-bgon oletusarvoisesti asettamaton, meillä ei ole oletusruudun varjoa.
Kun joko .table-striped, .table-hovertai .table-activeluokat lisätään, --bs-table-accent-bgasetetaan puoliläpinäkyvä väri taustan värittämiseksi.
Jokaiselle pöytäversiolle luomme --bs-table-accent-bgvärin, jolla on suurin kontrasti kyseisestä väristä riippuen. Esimerkiksi korostusväri .table-primaryon tummempi, kun taas .table-darksillä on vaaleampi korostusväri.
Tekstin ja reunusten värit luodaan samalla tavalla, ja niiden värit peritään oletuksena.

Kulissien takaa näyttää tältä:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Taulukon reunat

Reunustetut pöydät

Lisää .table-borderedreunuksia varten taulukon ja solujen kaikilla puolilla.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-bordered">
  ...
</table>

Reunuksen väriapuohjelmia voidaan lisätä värien muuttamiseksi:

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-bordered border-primary">
  ...
</table>

Taulukot ilman reunuksia

Lisää .table-borderlesstaulukkoon ilman reunuksia.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-borderless">
  ...
</table>

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-dark table-borderless">
  ...
</table>

Pienet pöydät

Lisää kompaktimmaksi leikkaamalla kaikki solut .table-smpuoliksi ..tablepadding

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-dark table-sm">
  ...
</table>

Pystysuuntainen kohdistus

Taulukon solut <thead>tasataan aina pystysuoraan alareunaan. Taulukon solut <tbody>perivät tasauksensa <table>yläreunasta ja tasataan oletuksena yläreunaan. Käytä pystytasausluokkia kohdistaaksesi uudelleen tarvittaessa.

Otsikko 1	Otsikko 2	Otsikko 3	Otsikko 4
Tämä solu perii `vertical-align: middle;`taulukosta	Tämä solu perii `vertical-align: middle;`taulukosta	Tämä solu perii `vertical-align: middle;`taulukosta	Tämä tässä on paikkamerkkitekstiä, joka on tarkoitettu viemään melko paljon pystysuoraa tilaa havainnollistamaan, kuinka pystysuora kohdistus toimii edeltävissä soluissa.
Tämä solu perii `vertical-align: bottom;`taulukon riviltä	Tämä solu perii `vertical-align: bottom;`taulukon riviltä	Tämä solu perii `vertical-align: bottom;`taulukon riviltä	Tämä tässä on paikkamerkkitekstiä, joka on tarkoitettu viemään melko paljon pystysuoraa tilaa havainnollistamaan, kuinka pystysuora kohdistus toimii edeltävissä soluissa.
Tämä solu perii `vertical-align: middle;`taulukosta	Tämä solu perii `vertical-align: middle;`taulukosta	Tämä solu on kohdistettu yläreunaan.	Tämä tässä on paikkamerkkitekstiä, joka on tarkoitettu viemään melko paljon pystysuoraa tilaa havainnollistamaan, kuinka pystysuora kohdistus toimii edeltävissä soluissa.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Pesivä

Sisäkkäiset taulukot eivät peri reunatyylejä, aktiivisia tyylejä ja taulukkomuunnelmia.

Ensimmäinen

Kestää

Kahva

Mark

Otto

@mdo

Otsikko	Otsikko	Otsikko
A	Ensimmäinen	Kestää
B	Ensimmäinen	Kestää
C	Ensimmäinen	Kestää

Larry

lintu

@viserrys

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kuinka pestäytys toimii

Jotta tyylejä ei vuotaisi sisäkkäisiin taulukoihin, käytämme CSS:ssämme lapsikombinaattoria ( )> . Koska meidän on kohdistettava kaikkiin tds:ihin ja ths:iin thead, tbody, ja tfoot, valitsin näyttäisi melko pitkältä ilman sitä. Sellaisenaan käytämme melko oudolta näyttävää .table > :not(caption) > * > *valitsinta kohdistaaksemme kaikkiin taulukoihin td, mutta ei yhteenkään mahdollisista sisäkkäisistä taulukoista.th.table

Huomaa, että jos lisäät <tr>s:t taulukon suoriksi lapsiksi, ne <tr>kääritään <tbody>oletuksena a-kirjaimeen, jolloin valitsimet toimivat tarkoitetulla tavalla.

Anatomia

Pöydän pää

Kuten taulukoissa ja tummissa taulukoissa, käytä muokkausluokkia .table-lighttai .table-darksaadaksesi ne <thead>näyttämään vaalealta tai tummanharmaalta.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Pöydän jalka

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys
Alatunniste	Alatunniste	Alatunniste	Alatunniste

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Kuvatekstit

Toimii <caption>kuten taulukon otsikko. Se auttaa näytönlukuohjelmia käyttäviä käyttäjiä löytämään taulukon ja ymmärtämään, mistä siinä on kyse, ja päättämään, haluavatko he lukea sen.

Lista käyttäjistä
#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Voit myös laittaa <caption>sen pöydän yläosaan -painikkeella .caption-top.

Lista käyttäjistä
#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Responsiiviset taulukot

Responsiivisten taulukoiden avulla taulukoita voi vierittää vaakasuunnassa helposti. Tee mistä tahansa taulukosta responsiivinen kaikissa näkymäporteissa rivittämällä a .table-merkillä .table-responsive. Tai valitse maksimi keskeytyskohta, johon haluat saada reagoivan taulukon, käyttämällä .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Pystyleikkaus/leikkaus

Responsiivisissa taulukoissa käytetään overflow-y: hidden, joka leikkaa pois kaiken sisällön, joka ylittää taulukon ala- tai yläreunan. Tämä voi erityisesti leikata pois avattavat valikot ja muut kolmannen osapuolen widgetit.

Aina reagoiva

Käytä jokaisessa keskeytyskohdassa .table-responsivevaakasuoraan vierittäviin taulukoihin.

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Katkopistekohtainen

Käytä .table-responsive{-sm|-md|-lg|-xl|-xxl}tarvittaessa responsiivisten taulukoiden luomiseen tiettyyn keskeytyskohtaan asti. Tästä keskeytyskohdasta alkaen taulukko toimii normaalisti eikä vieritä vaakasuunnassa.

Nämä taulukot voivat näyttää rikkinäisiltä, kunnes niiden responsiiviset tyylit ovat käytössä tietyillä näkymän leveyksillä.

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

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

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

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

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

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

Sass

Muuttujat

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Silmukka

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Mukauttaminen

Tekijämuuttujia ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) käytetään kontrastin määrittämiseen taulukkoversioissa.
Vaaleiden ja tummien pöytäversioiden lisäksi teemavärejä vaalennetaan $table-bg-levelmuuttujan avulla.