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.

Příklady

Vzhledem k rozšířenému používání tabulek ve widgetech třetích stran, jako jsou kalendáře a nástroje pro výběr data, jsme naše tabulky navrhli tak, aby byly přihlášené . Stačí přidat základní třídu .tabledo libovolné třídy <table>a poté ji rozšířit o vlastní styly nebo naše různé zahrnuté třídy modifikátorů.

Pomocí nejzákladnějších značek tabulek zde je návod, jak .tabletabulky založené na typu vypadají v Bootstrapu. Všechny styly tabulek jsou v Bootstrap 4 zděděny , což znamená, že všechny vnořené tabulky budou stylizovány stejným způsobem jako nadřazené.

# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Můžete také invertovat barvy – se světlým textem na tmavém pozadí – pomocí .table-dark.

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

Možnosti hlavy stolu

Podobně jako u tabulek a tmavých tabulek použijte třídy modifikátorů .thead-lightnebo .thead-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í
# První Poslední Rukojeť
1 Označit Otto @mdo
2 Jacobe Thornton @Tlustý
3 Larry pták @cvrlikání 
<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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

Ohraničený stůl

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

Stůl 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">
  <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>

.table-borderlesslze použít i na tmavé stoly.

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

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

Malý stůl

Chcete-li, aby byly stoly kompaktnější, přidejte .table-smvýplň buněk na polovinu.

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

Kontextové třídy

Použijte kontextové třídy k obarvení řádků tabulky nebo jednotlivých buněk.

Třída Nadpis Nadpis
Aktivní Buňka Buňka
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 rows -->
<tr class="table-active">...</tr>
<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-active">...</td>
  <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>

Běžné varianty pozadí tabulky nejsou k dispozici s tmavou tabulkou, můžete však použít text nebo nástroje na pozadí k dosažení podobných stylů.

# Nadpis Nadpis
1 Buňka Buňka
2 Buňka Buňka
3 Buňka Buňka
4 Buňka Buňka
5 Buňka Buňka
6 Buňka Buňka
7 Buňka Buňka
8 Buňka Buňka
9 Buňka Buňka 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlytřídě.

Vytvářejte responzivní tabulky tak, že libovolnou zabalíte .tabledo .table-responsive{-sm|-md|-lg|-xl}, čímž umožníte vodorovnému posouvání tabulky v každém max-widthzarážkovém bodu až (ale ne včetně) 576 pixelů, 768 pixelů, 992 pixelů a 1120 pixelů, v daném pořadí.

Všimněte si, že vzhledem k tomu, že prohlížeče v současné době nepodporují rozsahové kontextové dotazy , obcházíme omezení min-a max-předpony a výřezy se zlomkovou šířkou (které se mohou za určitých podmínek vyskytnout například na zařízeních s vysokým rozlišením) pomocí hodnot s vyšší přesností pro tato srovnání. .

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 Larry pták @cvrlikání 
<table class="table">
  <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 zabalením a .tables .table-responsive. Nebo vyberte maximální bod přerušení, s nímž chcete mít responzivní tabulku až pomocí .table-responsive{-sm|-md|-lg|-xl}.

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