Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Tabulky

Dokumentace a příklady pro opt-in stylování tabulek (vzhledem k jejich převládajícímu použití v pluginech JavaScriptu) pomocí Bootstrap.

Na této straně

Přehled

Vzhledem k rozšířenému používání <table>prvků napříč widgety třetích stran, jako jsou kalendáře a nástroje pro výběr data, jsou tabulky Bootstrapu volitelné . Přidejte základní třídu .tabledo libovolné třídy <table>a poté ji rozšiřte o naše volitelné třídy modifikátorů nebo vlastní styly. Všechny styly tabulek nejsou v Bootstrapu zděděny, což znamená, že jakékoli vnořené tabulky mohou být stylizovány nezávisle na nadřazené.

Pomocí nejzákladnějších značek tabulek zde je návod, jak .tabletabulky založené na typu vypadají v Bootstrapu.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<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žijte kontextové třídy k obarvení tabulek, řádků tabulek nebo jednotlivých buněk.

Třída Nadpis Nadpis
Výchozí Buňka Buňka
Hlavní Buňka Buňka
Sekundární Buňka Buňka
Úspěch Buňka Buňka
Nebezpečí Buňka Buňka
Varování Buňka Buňka
Info Buňka Buňka
Světlo Buňka Buňka
Temný Buňka Buňka 
<!-- 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>
Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .visually-hiddentřídě.

Akcentované tabulky

Pruhované řady

Použijte .table-stripedk přidání pruhů zebry do libovolného řádku tabulky v rámci <tbody>.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-striped">
  ...
</table>

Tyto třídy lze také přidat do variant tabulky:

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-dark table-striped">
  ...
</table>
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-success table-striped">
  ...
</table>

Vznášející se řádky

Přidat .table-hover, chcete-li povolit stav přechodu na řádky tabulky v souboru <tbody>.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-hover">
  ...
</table>
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-dark table-hover">
  ...
</table>

Tyto pohyblivé řady lze kombinovat i s pruhovanou variantou:

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-striped table-hover">
  ...
</table>

Aktivní stoly

Zvýrazněte řádek nebo buňku tabulky přidáním .table-activetřídy.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<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>
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<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>

Jak fungují varianty a tabulky s diakritikou?

U tabulek s diakritikou ( prokládané řádky , pohyblivé řádky a aktivní tabulky ) jsme použili některé techniky, aby tyto efekty fungovaly pro všechny naše varianty tabulek :

  • Začneme nastavením pozadí buňky tabulky s --bs-table-bgvlastní vlastností. Všechny varianty tabulky pak nastaví tuto uživatelskou vlastnost tak, aby obarvila buňky tabulky. Tímto způsobem se nedostaneme do problémů, pokud jsou jako pozadí stolu použity poloprůhledné barvy.
  • Poté přidáme stín vloženého rámečku na buňky tabulky pomocí box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);vrstvy na libovolnou zadanou background-color. Protože používáme obrovský rozptyl a žádné rozmazání, barva bude monotónní. Protože --bs-table-accent-bgje ve výchozím nastavení nenastaveno, nemáme výchozí stín pole.
  • Když jsou přidány buď .table-striped, .table-hovernebo .table-activetřídy, --bs-table-accent-bgnastaví se poloprůhledná barva pro obarvení pozadí.
  • Pro každou variantu stolu vygenerujeme --bs-table-accent-bgbarvu s nejvyšším kontrastem v závislosti na této barvě. Například barva zvýraznění pro .table-primaryje tmavší, zatímco .table-darkbarva zvýraznění má světlejší.
  • Barvy textu a ohraničení se generují stejným způsobem a jejich barvy se ve výchozím nastavení dědí.

V zákulisí to vypadá 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 tabulky

Ohraničené stoly

Přidat .table-borderedpro ohraničení na všech stranách tabulky a buněk.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-bordered">
  ...
</table>

Pro změnu barev lze přidat nástroje pro barvu ohraničení :

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-bordered border-primary">
  ...
</table>

Tabulky bez okrajů

Přidat .table-borderlesspro tabulku bez ohraničení.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-borderless">
  ...
</table>
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-dark table-borderless">
  ...
</table>

Malé stoly

Přidejte .table-sm, aby bylo .tablevše kompaktnější rozříznutím všech buněk paddingna polovinu.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-sm">
  ...
</table>
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-dark table-sm">
  ...
</table>

Vertikální zarovnání

Buňky tabulky <thead>jsou vždy zarovnány svisle dolů. Buňky tabulky v <tbody>zdědí své zarovnání od <table>a jsou ve výchozím nastavení zarovnány nahoru. V případě potřeby použijte třídy vertikálního zarovnání k opětovnému zarovnání.

Nadpis 1 Nadpis 2 Nadpis 3 Nadpis 4
Tato buňka dědí vertical-align: middle;z tabulky Tato buňka dědí vertical-align: middle;z tabulky Tato buňka dědí vertical-align: middle;z tabulky Zde je nějaký zástupný text, který má zabírat docela dost svislého prostoru, aby demonstroval, jak funguje svislé zarovnání v předchozích buňkách.
Tato buňka dědí vertical-align: bottom;z řádku tabulky Tato buňka dědí vertical-align: bottom;z řádku tabulky Tato buňka dědí vertical-align: bottom;z řádku tabulky Zde je nějaký zástupný text, který má zabírat docela dost svislého prostoru, aby demonstroval, jak funguje svislé zarovnání v předchozích buňkách.
Tato buňka dědí vertical-align: middle;z tabulky Tato buňka dědí vertical-align: middle;z tabulky Tato buňka je zarovnána nahoru. Zde je nějaký zástupný text, který má zabírat docela dost svislého prostoru, aby demonstroval, jak funguje svislé zarovnání v předchozích buňká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>

Hnízdění

Styly ohraničení, aktivní styly a varianty tabulek nedědí vnořené tabulky.

# První Poslední Rukojeť
1 Označit Otto @mdo
Záhlaví Záhlaví Záhlaví
A První Poslední
B První Poslední
C První Poslední
3 Larry pták @cvrlikání 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Jak funguje hnízdění

Abychom zabránili úniku jakýchkoli stylů do vnořených tabulek, používáme >v našem CSS selektor podřízeného kombinátoru ( ). Protože potřebujeme cílit na všechna tds a ths v thead, tbody, a tfoot, náš selektor by bez něj vypadal docela dlouho. Jako takový používáme poněkud zvláštně vypadající .table > :not(caption) > * > *selektor k cílení na všechny tdsamy , ale thna .tabležádnou z potenciálních vnořených tabulek.

Všimněte si, že pokud přidáte <tr>s jako přímé potomky tabulky, <tr>budou ve <tbody>výchozím nastavení zabaleny do a, takže naše selektory budou fungovat tak, jak mají.

Anatomie

Hlava stolu

Podobně jako u tabulek a tmavých tabulek použijte třídy modifikátorů .table-lightnebo .table-darkk tomu, aby <thead>s vypadalo světle nebo tmavě šedě.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Noha stolu

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání
Zápatí Zápatí Zápatí Zápatí 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Titulky

Funkce <caption>funguje jako záhlaví tabulky. Pomáhá uživatelům se čtečkami obrazovky najít tabulku a pochopit, o čem je, a rozhodnout se, zda ji chtějí číst.

Seznam uživatelů
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Pták Larry @cvrlikání 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Můžete také umístit <caption>na horní část stolu pomocí .caption-top.

Seznam uživatelů
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání 
<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>

Responzivní tabulky

Responzivní tabulky umožňují snadné horizontální posouvání tabulek. Učiňte libovolnou tabulku tak, aby byla citlivá ve všech výřezech, a to tak, že zabalíte a .tables .table-responsive. Nebo vyberte maximální zarážku, se kterou chcete mít responzivní tabulku až pomocí .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikální oříznutí/zkrácení

Responzivní tabulky využívají overflow-y: hidden, který ořízne veškerý obsah přesahující spodní nebo horní okraje tabulky. Zejména to může oříznout rozbalovací nabídky a další widgety třetích stran.

Vždy reagovat

Přes každý bod přerušení použijte .table-responsivepro vodorovné posouvání tabulek.

# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Konkrétní bod zlomu

Použijte .table-responsive{-sm|-md|-lg|-xl|-xxl}podle potřeby k vytvoření responzivních tabulek až do konkrétního bodu přerušení. Od tohoto bodu přerušení a výše se tabulka bude chovat normálně a nebude se posouvat vodorovně.

Tyto tabulky se mohou jevit jako rozbité, dokud se jejich responzivní styly nepoužijí v určitých šířkách výřezu.

# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
# Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis Nadpis
1 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
2 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka
3 Buňka Buňka Buňka Buňka Buňka Buňka Buňka Buňka 
<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

Proměnné

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

Smyčka

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

Přizpůsobení

  • Faktorové proměnné ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) se používají k určení kontrastu ve variantách tabulky.
  • Kromě variant světlého a tmavého stolu jsou motivové barvy zesvětleny $table-bg-levelproměnnou.