in English

Stolovi

Dokumentacija i primjeri za opt-in stilizovanje tabela (s obzirom na njihovu preovlađujuću upotrebu u JavaScript dodacima) sa Bootstrapom.

Na ovoj stranici

Pregled

Zbog široke upotrebe elemenata u<table> widgetima trećih strana kao što su kalendari i birači datuma, Bootstrap tabele su uključene . Dodajte osnovnu klasu bilo kojoj , a zatim proširite 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..table<table>

Koristeći najosnovnije oznake tablice, evo kako .tableizgledaju tablice zasnovane na Bootstrapu.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

<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 bojenje tablica, redova tablice ili pojedinačnih ćelija.

Klasa	Naslov	Naslov
Default	Cell	Cell
Primarni	Cell	Cell
Sekundarni	Cell	Cell
Uspjeh	Cell	Cell
Opasnost	Cell	Cell
Upozorenje	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	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>

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hiddenklasom.

Naglašeni stolovi

Prugasti redovi

Koristite .table-stripedza dodavanje zebrastih pruga u bilo koji red tabele unutar <tbody>.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Ove klase se takođe mogu dodati varijantama tabele:

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Lebdeći redovi

Dodajte .table-hoverda omogućite stanje lebdenja na redovima tabele unutar <tbody>.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Ovi lebdeći redovi se takođe mogu kombinovati sa prugastom varijantom:

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Aktivni stolovi

Označite red ili ćeliju tabele dodavanjem .table-activeklase.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

<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 funkcionišu varijante i tabele sa akcentima?

Za tabele sa akcentima ( prugasti redovi , redovi koji se mogu lebdeti i aktivne tabele ), koristili smo neke tehnike da ovi efekti rade za sve naše varijante tabele :

Počinjemo postavljanjem pozadine ćelije tabele sa --bs-table-bgprilagođenim svojstvom. Sve varijante tablice zatim postavljaju to prilagođeno svojstvo da boji ćelije tablice. Na ovaj način nećemo imati problema ako se kao pozadina stola koriste poluprozirne boje.
Zatim dodajemo sjenu umetnutog okvira na ćelije tablice sa box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);slojem na bilo koji specificirani background-color. Budući da koristimo veliku širinu i nema zamućenja, boja će biti monotona. Pošto --bs-table-accent-bgje po defaultu nepostavljeno, nemamo zadanu sjenu okvira.
Kada se dodaju ili .table-striped, .table-hoverili .table-activeklase, --bs-table-accent-bgpostavlja se na poluprozirnu boju kako bi se obojila pozadina.
Za svaku varijantu tabele generišemo --bs-table-accent-bgboju sa najvećim kontrastom u zavisnosti od te boje. Na primjer, boja akcenta za .table-primaryje tamnija dok .table-darkima svjetliju akcentnu boju.
Boje teksta i obruba se generišu na isti način, a njihove boje se nasljeđuju po defaultu.

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

Obrubljene tabele

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Uslužni programi za boje ivice mogu se dodati za promjenu boja:

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Tablice bez granica

Dodajte .table-borderlessza tabelu bez granica.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Mali stolovi

Dodajte .table-smkako biste .tablebili kompaktniji tako što ćete paddingprepoloviti sve ćelije.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

Vertikalno poravnanje

Ćelije tabele od <thead>uvek su vertikalno poravnate prema dnu. Ćelije tablice u <tbody>nasljeđuju svoje poravnanje <table>i prema zadanim postavkama su poravnate prema vrhu. Koristite klase vertikalnog poravnanja za ponovno poravnavanje gdje je potrebno.

Naslov 1	Naslov 2	Naslov 3	Naslov 4
Ova ćelija nasljeđuje `vertical-align: middle;`iz tabele	Ova ćelija nasljeđuje `vertical-align: middle;`iz tabele	Ova ćelija nasljeđuje `vertical-align: middle;`iz tabele	Ovo je neki tekst čuvara mjesta, namijenjen da zauzme dosta vertikalnog prostora, da pokaže kako funkcionira vertikalno poravnanje u prethodnim ćelijama.
Ova ćelija nasljeđuje `vertical-align: bottom;`red tabele	Ova ćelija nasljeđuje `vertical-align: bottom;`red tabele	Ova ćelija nasljeđuje `vertical-align: bottom;`red tabele	Ovo je neki tekst čuvara mjesta, namijenjen da zauzme dosta vertikalnog prostora, da pokaže kako funkcionira vertikalno poravnanje u prethodnim ćelijama.
Ova ćelija nasljeđuje `vertical-align: middle;`iz tabele	Ova ćelija nasljeđuje `vertical-align: middle;`iz tabele	Ova ćelija je poravnata prema vrhu.	Ovo je neki tekst čuvara mjesta, namijenjen da zauzme dosta vertikalnog prostora, da pokaže kako funkcionira vertikalno 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>

Nesting

Stilovi obruba, aktivni stilovi i varijante tablice ne nasljeđuju ugniježđene tablice.

Prvo

Last

Drška

Mark

Otto

@mdo

Zaglavlje	Zaglavlje	Zaglavlje
A	Prvo	Last
B	Prvo	Last
C	Prvo	Last

Larry

ptica

@twitter

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

Kako funkcionira ugniježđenje

Kako bismo spriječili da bilo koji stil procuri 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š selektor bi izgledao prilično dugo bez njega. Kao takav, koristimo .table > :not(caption) > * > *selektor prilično čudnog izgleda da ciljamo sve tds i ths u .table, ali nijednu od potencijalnih ugniježđenih tablica.

Imajte na umu da ako dodate <tr>s kao direktnu djecu tablice, oni <tr>će biti umotani u a <tbody>prema zadanim postavkama, čime će naši selektori raditi kako je predviđeno.

Anatomija

Glava stola

Slično tablicama i tamnim tabelama, koristite modifikatorske klase .table-lightili .table-darkda bi <thead>s izgledali svijetlo ili tamno sivo.

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry	ptica	@twitter

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

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry	ptica	@twitter

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

Noga stola

#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry	ptica	@twitter
Podnožje	Podnožje	Podnožje	Podnožje

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

Naslovi

Funkcioniše <caption>kao naslov za tabelu. Pomaže korisnicima sa čitačima ekrana da pronađu tabelu i razumiju o čemu se radi i odluče žele li je pročitati.

Spisak korisnika
#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry the Bird		@twitter

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

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

Spisak korisnika
#	Prvo	Last	Drška
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debeo
3	Larry	ptica	@twitter

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

Responsive tables

Prilagodljive tabele omogućavaju horizontalno pomeranje tabela sa lakoćom. Učinite bilo koju tabelu prilagodljivom u svim okvirima za prikaz tako što ćete omotati a .tablesa .table-responsive. Ili odaberite maksimalnu tačku prekida s kojom ćete imati prilagodljivu tablicu koristeći .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikalno odsecanje/skraćenje

Responzivne tabele koriste overflow-y: hidden, koji odseca svaki sadržaj koji ide dalje od donje ili gornje ivice tabele. Konkretno, ovo može ukloniti padajuće menije i druge vidžete trećih strana.

Uvijek odgovara

U svakoj tački prekida koristite .table-responsiveza vodoravno pomicanje tablica.

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

Specifična tačka prekida

Koristite .table-responsive{-sm|-md|-lg|-xl|-xxl}po potrebi za kreiranje responzivnih tabela do određene tačke prekida. Od te tačke prekida i naviše, tabela će se ponašati normalno i neće se pomerati horizontalno.

Ove tabele mogu izgledati pokvarene sve dok se njihovi stilovi odziva ne primenjuju na određene širine prozora za prikaz.

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

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

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

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

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

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

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

Prilagođavanje

Faktorske varijable ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) se koriste za određivanje kontrasta u varijantama tablice.
Osim svijetlih i tamnih varijanti stola, boje teme su posvijetljene $table-bg-levelpromjenjivom.