Source

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

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

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

#	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-md">
  <table class="table">
    ...
  </table>
</div>

#	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-lg">
  <table class="table">
    ...
  </table>
</div>

#	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-xl">
  <table class="table">
    ...
  </table>
</div>