Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
in English

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.

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äť
1 Marka Otto @mdo
Hlavička Hlavička Hlavička
A najprv Posledný
B najprv Posledný
C najprv Posledný
3 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.