Tabuľky

Dokumentácia a príklady voliteľného štýlu tabuliek (vzhľadom na ich rozšírené použitie v doplnkoch JavaScriptu) pomocou Bootstrapu.

Na tejto stránke

Prehľad

Vzhľadom na rozšírené používanie <table>prvkov vo widgetoch tretích strán, ako sú kalendáre a nástroje na výber dátumu, sú tabuľky Bootstrapu voliteľné . Pridajte základnú triedu .tabledo ľubovoľnej triedy <table>a potom ju rozšírte o naše voliteľné triedy modifikátorov alebo vlastné štýly. Všetky štýly tabuliek nie sú dedené v Bootstrape, čo znamená, že akékoľvek vnorené tabuľky môžu byť štylizované nezávisle od rodiča.

Pomocou najzákladnejšieho označenia tabuliek tu je návod, ako .tablevyzerajú tabuľky založené na systéme Bootstrap.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

Varianty

Použite kontextové triedy na zafarbenie tabuliek, riadkov tabuľky alebo jednotlivých buniek.

Trieda	Smerovanie	Smerovanie
Predvolené	Bunka	Bunka
Primárny	Bunka	Bunka
Sekundárne	Bunka	Bunka
Úspech	Bunka	Bunka
Nebezpečenstvo	Bunka	Bunka
POZOR	Bunka	Bunka
Info	Bunka	Bunka
Svetlo	Bunka	Bunka
Tmavý	Bunka	Bunka

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

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .visually-hiddentriedou.

Zvýraznené tabuľky

Pruhované riadky

Použite .table-stripedna pridanie zebrovaného pruhu do ľubovoľného riadku tabuľky v rámci <tbody>.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Tieto triedy možno pridať aj do variantov tabuľky:

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Vznášateľné riadky

Pridať .table-hover, ak chcete povoliť stav prechodu na riadky tabuľky v rámci súboru <tbody>.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Tieto vznášacie rady je možné kombinovať aj s pruhovaným variantom:

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Aktívne stoly

Zvýraznite riadok alebo bunku tabuľky pridaním .table-activetriedy.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

Ako fungujú varianty a tabuľky s diakritikou?

V prípade tabuliek s diakritikou ( pruhované riadky , riadky s pohybom a aktívne tabuľky ) sme použili niekoľko techník, aby tieto efekty fungovali pre všetky naše varianty tabuliek :

Začneme nastavením pozadia bunky tabuľky s --bs-table-bgvlastnou vlastnosťou. Všetky varianty tabuľky potom nastavia túto vlastnú vlastnosť na zafarbenie buniek tabuľky. Takto sa nedostaneme do problémov, ak sa ako pozadie stola použijú polopriehľadné farby.
Potom pridáme tieň vloženého rámčeka na bunky tabuľky s box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);vrstvou na vrch ľubovoľnej špecifikovanej background-color. Pretože používame obrovské rozmazanie a žiadne rozmazanie, farba bude monotónna. Keďže --bs-table-accent-bgje v predvolenom nastavení nenastavená, nemáme predvolený tieň poľa.
Keď sa pridá trieda .table-striped, .table-hoveralebo , nastaví sa polopriehľadná farba na zafarbenie pozadia..table-active--bs-table-accent-bg
Pre každý variant stola vygenerujeme --bs-table-accent-bgfarbu s najvyšším kontrastom v závislosti od tejto farby. Napríklad akcentová farba pre .table-primaryje tmavšia, zatiaľ čo .table-darkmá svetlejšiu akcentovú farbu.
Farby textu a okrajov sa generujú rovnakým spôsobom a ich farby sa predvolene dedia.

V zákulisí to vyzerá takto:

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

Hranice tabuľky

Ohraničené stoly

Pridajte .table-borderedokraje na všetkých stranách tabuľky a buniek.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Na zmenu farieb je možné pridať pomocné programy farieb okrajov:

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Tabuľky bez okrajov

Pridať .table-borderlesspre tabuľku bez okrajov.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Malé stolíky

Pridajte .table-sm, aby bolo všetko .tablekompaktnejšie rozrezaním všetkých buniek paddingna polovicu.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Vertikálne zarovnanie

Bunky tabuľky <thead>sú vždy vertikálne zarovnané nadol. Bunky tabuľky <tbody>zdedia svoje zarovnanie od <table>a sú predvolene zarovnané nahor. Ak je to potrebné, použite triedy vertikálneho zarovnania na opätovné zarovnanie.

Nadpis 1	Nadpis 2	Nadpis 3	Nadpis 4
Táto bunka dedí `vertical-align: middle;`z tabuľky	Táto bunka dedí `vertical-align: middle;`z tabuľky	Táto bunka dedí `vertical-align: middle;`z tabuľky	Toto je nejaký zástupný text, ktorý má zaberať dosť zvislého priestoru, aby demonštroval, ako funguje vertikálne zarovnanie v predchádzajúcich bunkách.
Táto bunka zdedí `vertical-align: bottom;`riadok tabuľky	Táto bunka zdedí `vertical-align: bottom;`riadok tabuľky	Táto bunka zdedí `vertical-align: bottom;`riadok tabuľky	Toto je nejaký zástupný text, ktorý má zaberať dosť zvislého priestoru, aby demonštroval, ako funguje vertikálne zarovnanie v predchádzajúcich bunkách.
Táto bunka dedí `vertical-align: middle;`z tabuľky	Táto bunka dedí `vertical-align: middle;`z tabuľky	Táto bunka je zarovnaná nahor.	Toto je nejaký zástupný text, ktorý má zaberať dosť zvislého priestoru, aby demonštroval, ako funguje vertikálne zarovnanie v predchádzajúcich bunkách.

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

Hniezdenie

Štýly orámovania, aktívne štýly a varianty tabuliek nie sú dedené vnorenými tabuľkami.

najprv

Posledný

Rukoväť

Marka

Otto

@mdo

Hlavička	Hlavička	Hlavička
A	najprv	Posledný
B	najprv	Posledný
C	najprv	Posledný

Larry

vták

@twitter

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

Ako funguje hniezdenie

Aby sme zabránili úniku akýchkoľvek štýlov do vnorených tabuliek, používame >v našom CSS selektor podriadeného kombinátora ( ). Keďže potrebujeme zacieliť na všetky tds a ths v thead, tbody, a tfoot, náš selektor by bez neho vyzeral dosť dlho. Ako taký používame dosť zvláštne vyzerajúci .table > :not(caption) > * > *selektor, aby sme zacielili na všetky tds a thna .tabležiadnu z potenciálne vnorených tabuliek.

Všimnite si, že ak pridáte <tr>s ako priame potomky tabuľky, tieto <tr>budú <tbody>predvolene zabalené do a, vďaka čomu budú naše selektory fungovať podľa plánu.

Anatómia

Hlava stola

Podobne ako pri tabuľkách a tmavých tabuľkách použite triedy modifikátorov .table-lightalebo .table-dark, aby sa <thead>s javilo ako svetlosivé alebo tmavosivé.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

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

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

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

Noha stola

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter
Päta	Päta	Päta	Päta

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

Titulky

Funkcia <caption>funguje ako hlavička tabuľky. Pomáha používateľom s čítačkami obrazovky nájsť tabuľku a pochopiť, o čom je, a rozhodnúť sa, či si ju chcú prečítať.

Zoznam používateľov
#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Môžete tiež umiestniť <caption>na hornú časť stola pomocou .caption-top.

Zoznam používateľov
#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

Responzívne tabuľky

Responzívne tabuľky umožňujú jednoduché horizontálne posúvanie tabuliek. Urobte akúkoľvek tabuľku tak, aby reagovala na všetky výrezy tak, že zabalíte a .tables .table-responsive. Alebo vyberte maximálny bod prerušenia, s ktorým chcete mať responzívnu tabuľku až do, pomocou .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikálne orezanie / skrátenie

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

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

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

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

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

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

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

Variables

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

Loop

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

Customizing

The factor variables ($table-striped-bg-factor, $table-active-bg-factor & $table-hover-bg-factor) are used to determine the contrast in table variants.
Okrem variantov svetlý a tmavý stolík sú farby motívu zosvetlené $table-bg-levelvariabilným.