Source

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.

Príklady

Vzhľadom na rozšírené používanie tabuliek v miniaplikáciách tretích strán, ako sú kalendáre a nástroje na výber dátumu, sme naše tabuľky navrhli tak, aby boli voliteľné . Stačí pridať základnú triedu .tabledo ľubovoľnej triedy <table>a potom ju rozšíriť o vlastné štýly alebo naše rôzne zahrnuté triedy modifikátorov.

Pomocou najzákladnejšieho označenia tabuliek tu je návod, ako .tablevyzerajú tabuľky založené na systéme Bootstrap. Všetky štýly tabuliek sú zdedené v Bootstrap 4 , čo znamená, že všetky vnorené tabuľky budú štylizované rovnakým spôsobom ako nadradené.

# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Môžete tiež invertovať farby – so svetlým textom na tmavom pozadí – pomocou .table-dark.

# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter 
<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 stolovej hlavy

Podobne ako pri tabuľkách a tmavých tabuľkách použite triedy modifikátorov .thead-lightalebo .thead-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
# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter 
<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é 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 Larry vták @twitter 
<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>
# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Larry vták @twitter 
<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

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">
  <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>
# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
<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 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">
  <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-borderlessmožno použiť aj na tmavé stoly.

# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
<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áš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">
  <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>
# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
<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

Ak chcete, aby boli stoly kompaktnejšie, pridajte .table-smvýplň buniek na polovicu.

# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
<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>
# najprv Posledný Rukoväť
1 Marka Otto @mdo
2 Jacob Thornton @tuk
3 Vtáčik Larry @twitter 
<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é triedy

Použite kontextové triedy na zafarbenie riadkov tabuľky alebo jednotlivých buniek.

Trieda Smerovanie Smerovanie
Aktívne Bunka Bunka
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 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>

Bežné varianty pozadia tabuľky nie sú k dispozícii s tmavou tabuľkou, na dosiahnutie podobných štýlov však môžete použiť textové alebo pozadia .

# Smerovanie Smerovanie
1 Bunka Bunka
2 Bunka Bunka
3 Bunka Bunka
4 Bunka Bunka
5 Bunka Bunka
6 Bunka Bunka
7 Bunka Bunka
8 Bunka Bunka
9 Bunka Bunka 
<!-- 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>
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 .sr-onlytriedou.

Vytvorte responzívne tabuľky tak, že ľubovoľné zabalíte .tabledo .table-responsive{-sm|-md|-lg|-xl}, čím sa tabuľka posunie vodorovne pri každom max-widthbode zlomu až do (okrem iného) 576 pixelov, 768 pixelov, 992 pixelov a 1 120 pixelov.

Upozorňujeme, že keďže prehliadače v súčasnosti nepodporujú rozsahové kontextové dopyty , obchádzame obmedzenia min-a max-predpony a výrezy so zlomkovou šírkou (ktoré sa môžu vyskytnúť za určitých podmienok napríklad na zariadeniach s vysokým rozlíšením) pomocou hodnôt s vyššou presnosťou na tieto porovnania. .

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 Larry vták @twitter 
<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>

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

Vertikálne orezanie / skrátenie

Responzívne tabuľky využívajú overflow-y: hidden, ktorý orezáva akýkoľvek obsah, ktorý presahuje spodný alebo horný okraj tabuľky. Najmä to môže orezať rozbaľovacie ponuky a ďalšie miniaplikácie tretích strán.

Vždy reagovať

V každom bode prerušenia použite .table-responsivena horizontálne rolovanie tabuliek.

# Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie
1 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
2 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
3 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Špecifické pre bod zlomu

Použite .table-responsive{-sm|-md|-lg|-xl}podľa potreby na vytvorenie responzívnych tabuliek až po konkrétny bod prerušenia. Od tohto bodu prerušenia a vyššie sa tabuľka bude správať normálne a nebude sa posúvať vodorovne.

Tieto tabuľky sa môžu javiť ako poškodené, kým sa ich štýly odozvy neaplikujú na špecifické šírky výrezu.

# Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie
1 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
2 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
3 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie
1 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
2 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
3 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie
1 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
2 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
3 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie Smerovanie
1 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
2 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka
3 Bunka Bunka Bunka Bunka Bunka Bunka Bunka Bunka 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>