Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
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
1 Mark Otto @mdo
Zaglavlje Zaglavlje Zaglavlje
A Prvo Last
B Prvo Last
C Prvo Last
3 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.