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ť

Označit

Otto

@mdo

Záhlaví	Záhlaví	Záhlaví
A	První	Poslední
B	První	Poslední
C	První	Poslední

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.