in English

Stolovi

Dokumentacija i primjeri za opt-in stiliziranje tablica (s obzirom na njihovu prevladavajuću upotrebu u JavaScript dodacima) s Bootstrapom.

Na ovoj stranici

Pregled

Zbog široke upotrebe <table>elemenata u widgetima trećih strana kao što su kalendari i birači datuma, Bootstrapove tablice su opt-in . Dodajte osnovnu klasu .tablebilo kojem <table>, a zatim proširite s našim opcijskim modifikatorskim klasama ili prilagođenim stilovima. Svi stilovi tablica nisu naslijeđeni u Bootstrapu, što znači da se sve ugniježđene tablice mogu stilizirati neovisno o roditelju.

Koristeći najosnovnije označavanje tablice, evo kako .tabletablice temeljene na bazi izgledaju u Bootstrapu.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

<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>

Varijante

Koristite kontekstualne klase za bojanje tablica, redaka tablice ili pojedinačnih ćelija.

Klasa	Naslov	Naslov
Zadano	Ćelija	Ćelija
Primarni	Ćelija	Ćelija
Sekundarna	Ćelija	Ćelija
Uspjeh	Ćelija	Ćelija
Opasnost	Ćelija	Ćelija
Upozorenje	Ćelija	Ćelija
Info	Ćelija	Ćelija
Svjetlo	Ćelija	Ćelija
tamno	Ćelija	Ćelija

<!-- 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>

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .visually-hiddenklasom.

Naglašeni stolovi

Prugasti redovi

Koristite .table-stripedza dodavanje zebrastih pruga bilo kojem retku tablice unutar <tbody>.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Ove klase također se mogu dodati varijantama tablice:

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Lebdeći redovi

Dodajte .table-hoverda omogućite stanje lebdenja na recima tablice unutar <tbody>.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Ovi lebdeći redovi mogu se kombinirati i s prugastom varijantom:

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Aktivne tablice

Označite redak ili ćeliju tablice dodavanjem .table-activeklase.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

<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>

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

<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>

Kako funkcioniraju varijante i tablice s naglascima?

Za tablice s naglascima ( prugasti redovi , redovi koji mogu lebdjeti i aktivne tablice ), upotrijebili smo neke tehnike kako bi ovi efekti radili za sve naše varijante tablice :

Počinjemo postavljanjem pozadine ćelije tablice s --bs-table-bgprilagođenim svojstvom. Sve varijante tablice tada postavljaju to prilagođeno svojstvo za bojanje ćelija tablice. Na ovaj način nećemo imati problema ako se poluprozirne boje koriste kao pozadine stolova.
Zatim dodajemo sjenu umetnutog okvira na ćelije tablice sa box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);slojem na vrhu bilo kojeg navedenog background-color. Budući da koristimo veliku širinu i nema zamućenja, boja će biti monotona. Budući da --bs-table-accent-bgnije postavljeno prema zadanim postavkama, nemamo zadanu sjenu okvira.
Kada se dodaju ili .table-striped, .table-hoverili .table-activeklase, --bs-table-accent-bgpostavlja se na poluprozirnu boju kako bi obojila pozadinu.
Za svaku varijantu tablice generiramo --bs-table-accent-bgboju s najvećim kontrastom ovisno o toj boji. Na primjer, boja naglaska za .table-primaryje tamnija dok .table-darkima svjetliju boju naglaska.
Boje teksta i obruba generiraju se na isti način, a njihove se boje nasljeđuju prema zadanim postavkama.

Iza kulisa to izgleda ovako:

@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));
  }
}

Granice tablice

Obrubljeni stolovi

Dodajte .table-borderedza obrube na svim stranama tablice i ćelija.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Pomoćni programi za boju obruba mogu se dodati za promjenu boja:

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Stolovi bez obruba

Dodati .table-borderlessza stol bez obruba.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Mali stolovi

Dodajte .table-smda bude .tablekompaktnije tako da sve ćelije prerežete paddingna pola.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Okomito poravnanje

Ćelije tablice <thead>uvijek su okomito poravnate prema dnu. Ćelije tablice <tbody>nasljeđuju svoje poravnanje od <table>i prema zadanim su postavkama poravnate prema vrhu. Koristite klase okomitog poravnanja za ponovno poravnavanje gdje je to potrebno.

Naslov 1	Naslov 2	Naslov 3	Naslov 4
Ova ćelija nasljeđuje `vertical-align: middle;`iz tablice	Ova ćelija nasljeđuje `vertical-align: middle;`iz tablice	Ova ćelija nasljeđuje `vertical-align: middle;`iz tablice	Ovo ovdje je tekst rezerviranog mjesta, čija je namjera da zauzme prilično malo okomitog prostora, kako bi se pokazalo kako funkcionira okomito poravnanje u prethodnim ćelijama.
Ova ćelija nasljeđuje `vertical-align: bottom;`redak tablice	Ova ćelija nasljeđuje `vertical-align: bottom;`redak tablice	Ova ćelija nasljeđuje `vertical-align: bottom;`redak tablice	Ovo ovdje je tekst rezerviranog mjesta, čija je namjera da zauzme prilično malo okomitog prostora, kako bi se pokazalo kako funkcionira okomito poravnanje u prethodnim ćelijama.
Ova ćelija nasljeđuje `vertical-align: middle;`iz tablice	Ova ćelija nasljeđuje `vertical-align: middle;`iz tablice	Ova ćelija je poravnata prema vrhu.	Ovo ovdje je tekst rezerviranog mjesta, čija je namjera da zauzme prilično malo okomitog prostora, kako bi se pokazalo kako funkcionira okomito poravnanje u prethodnim ćelijama.

<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>

Gniježđenje

Stilovi obruba, aktivni stilovi i varijante tablica ne nasljeđuju se od ugniježđenih tablica.

Prvi

Posljednji

Ručka

Ocjena

Otto

@mdo

Zaglavlje	Zaglavlje	Zaglavlje
A	Prvi	Posljednji
B	Prvi	Posljednji
C	Prvi	Posljednji

Larry

ptica

@cvrkut

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

Kako funkcionira gniježđenje

Kako bismo spriječili curenje stilova u ugniježđene tablice, koristimo >selektor podređenog kombinatora ( ) u našem CSS-u. Budući da moramo ciljati sve tds i ths u thead, tbody, i tfoot, naš bi selektor izgledao prilično dugo bez njega. Kao takav, koristimo .table > :not(caption) > * > *selektor prilično čudnog izgleda za ciljanje svih tds i ths od .table, ali niti jedne potencijalne ugniježđene tablice.

Imajte na umu da ako dodate <tr>s kao izravnu djecu tablice, oni <tr>će <tbody>prema zadanim postavkama biti omotani u a, čime naši selektori rade kako treba.

Anatomija

Glava stola

Slično tablicama i tamnim tablicama, upotrijebite klase modifikatora .table-lightili .table-darkkako bi <thead>izgledale svijetlo ili tamnosive.

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

Noga za stol

#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut
Podnožje	Podnožje	Podnožje	Podnožje

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

Opisi

A <caption>funkcionira kao naslov za tablicu. Pomaže korisnicima s čitačima zaslona da pronađu tablicu i razumiju o čemu se radi te odluče žele li je pročitati.

Popis korisnika
#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Također možete staviti <caption>na vrh stola pomoću .caption-top.

Popis korisnika
#	Prvi	Posljednji	Ručka
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

<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>

Responzivni stolovi

Responzivne tablice omogućuju lako vodoravno pomicanje tablica. Učinite bilo koju tablicu osjetljivom na sve okvire za prikaz omotavanjem .tables .table-responsive. Ili odaberite maksimalnu prijelomnu točku s kojom želite imati responzivnu tablicu pomoću .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Okomito rezanje/skraćivanje

Responzivni stolovi koriste overflow-y: hidden, koji izrezuje svaki sadržaj koji nadilazi donji ili gornji rub stola. Konkretno, ovo može isključiti padajuće izbornike i druge widgete trećih strana.

Uvijek odgovarajući

Preko svake prijelomne točke koristite .table-responsiveza vodoravno pomicanje tablica.

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

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

Specifična prijelomna točka

Koristite .table-responsive{-sm|-md|-lg|-xl|-xxl}prema potrebi za izradu odgovarajućih tablica do određene prijelomne točke. Od te prijelomne točke pa naviše, tablica će se ponašati normalno i neće se pomicati vodoravno.

Ove tablice mogu izgledati neispravne sve dok se njihovi responzivni stilovi ne primijene na određenim širinama okvira za prikaz.

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
2	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija
3	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija	Ćelija

<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

Varijable

$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%;

Petlja

$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,
);

Prilagodba

Za određivanje kontrasta u tabličnim varijantama koriste se faktorske varijable ( $table-striped-bg-factor, $table-active-bg-factor& ).$table-hover-bg-factor
Osim svijetlih i tamnih varijanti stola, boje teme posvijetljene su $table-bg-levelvarijablom.