Dokumentácia a príklady voliteľného štýlu tabuliek (vzhľadom na ich rozšírené použitie v doplnkoch JavaScriptu) pomocou Bootstrapu.
Na tejto stránke
Prehľad
Vzhľadom na rozšírené používanie <table>prvkov vo widgetoch tretích strán, ako sú kalendáre a nástroje na výber dátumu, sú tabuľky Bootstrapu voliteľné . Pridajte základnú triedu .tabledo ľubovoľnej triedy <table>a potom ju rozšírte o naše voliteľné triedy modifikátorov alebo vlastné štýly. Všetky štýly tabuliek nie sú dedené v Bootstrape, čo znamená, že akékoľvek vnorené tabuľky môžu byť štylizované nezávisle od rodiča.
Pomocou najzákladnejšieho označenia tabuliek tu je návod, ako .tablevyzerajú tabuľky založené na systéme Bootstrap.
#
najprv
Posledný
Rukoväť
1
Marka
Otto
@mdo
2
Jacob
Thornton
@tuk
3
Vtáčik Larry
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Varianty
Použite kontextové triedy na zafarbenie tabuliek, riadkov tabuľky alebo jednotlivých buniek.
Trieda
Smerovanie
Smerovanie
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 tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</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 .visually-hiddentriedou.
Zvýraznené tabuľky
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
Vtáčik Larry
@twitter
<tableclass="table table-striped">
...
</table>
Tieto triedy možno pridať aj do variantov tabuľky:
Začneme nastavením pozadia bunky tabuľky s --bs-table-bgvlastnou vlastnosťou. Všetky varianty tabuľky potom nastavia túto vlastnú vlastnosť na zafarbenie buniek tabuľky. Takto sa nedostaneme do problémov, ak sa ako pozadie stola použijú polopriehľadné farby.
Potom pridáme tieň vloženého rámčeka na bunky tabuľky s box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);vrstvou na vrch ľubovoľnej špecifikovanej background-color. Pretože používame obrovské rozmazanie a žiadne rozmazanie, farba bude monotónna. Keďže --bs-table-accent-bgje v predvolenom nastavení nenastavená, nemáme predvolený tieň poľa.
Keď sa pridá trieda .table-striped, .table-hoveralebo , nastaví sa polopriehľadná farba na zafarbenie pozadia..table-active--bs-table-accent-bg
Pre každý variant stola vygenerujeme --bs-table-accent-bgfarbu s najvyšším kontrastom v závislosti od tejto farby. Napríklad akcentová farba pre .table-primaryje tmavšia, zatiaľ čo .table-darkmá svetlejšiu akcentovú farbu.
Farby textu a okrajov sa generujú rovnakým spôsobom a ich farby sa predvolene dedia.
Bunky tabuľky <thead>sú vždy vertikálne zarovnané nadol. Bunky tabuľky <tbody>zdedia svoje zarovnanie od <table>a sú predvolene zarovnané nahor. Ak je to potrebné, použite triedy vertikálneho zarovnania na opätovné zarovnanie.
Nadpis 1
Nadpis 2
Nadpis 3
Nadpis 4
Táto bunka dedí vertical-align: middle;z tabuľky
Táto bunka dedí vertical-align: middle;z tabuľky
Táto bunka dedí vertical-align: middle;z tabuľky
Toto je nejaký zástupný text, ktorý má zaberať dosť zvislého priestoru, aby demonštroval, ako funguje vertikálne zarovnanie v predchádzajúcich bunkách.
Táto bunka zdedí vertical-align: bottom;riadok tabuľky
Táto bunka zdedí vertical-align: bottom;riadok tabuľky
Táto bunka zdedí vertical-align: bottom;riadok tabuľky
Toto je nejaký zástupný text, ktorý má zaberať dosť zvislého priestoru, aby demonštroval, ako funguje vertikálne zarovnanie v predchádzajúcich bunkách.
Táto bunka dedí vertical-align: middle;z tabuľky
Táto bunka dedí vertical-align: middle;z tabuľky
Táto bunka je zarovnaná nahor.
Toto je nejaký zástupný text, ktorý má zaberať dosť zvislého priestoru, aby demonštroval, ako funguje vertikálne zarovnanie v predchádzajúcich bunkách.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Hniezdenie
Štýly orámovania, aktívne štýly a varianty tabuliek nie sú dedené vnorenými tabuľkami.
Aby sme zabránili úniku akýchkoľvek štýlov do vnorených tabuliek, používame >v našom CSS selektor podriadeného kombinátora ( ). Keďže potrebujeme zacieliť na všetky tds a ths v thead, tbody, a tfoot, náš selektor by bez neho vyzeral dosť dlho. Ako taký používame dosť zvláštne vyzerajúci .table > :not(caption) > * > *selektor, aby sme zacielili na všetky tds a thna .tabležiadnu z potenciálne vnorených tabuliek.
Všimnite si, že ak pridáte <tr>s ako priame potomky tabuľky, tieto <tr>budú <tbody>predvolene zabalené do a, vďaka čomu budú naše selektory fungovať podľa plánu.
Anatómia
Hlava stola
Podobne ako pri tabuľkách a tmavých tabuľkách použite triedy modifikátorov .table-lightalebo .table-dark, aby sa <thead>s javilo ako svetlosivé alebo tmavosivé.
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
Vtáčik Larry
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Môžete tiež umiestniť <caption>na hornú časť stola pomocou .caption-top.
Zoznam používateľov
#
najprv
Posledný
Rukoväť
1
Marka
Otto
@mdo
2
Jacob
Thornton
@tuk
3
Larry
vták
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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|-xxl}.
Vertikálne orezanie / skrátenie
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
These tables may appear broken until their responsive styles apply at specific viewport widths.
The factor variables ($table-striped-bg-factor, $table-active-bg-factor & $table-hover-bg-factor) are used to determine the contrast in table variants.
Okrem variantov svetlý a tmavý stolík sú farby motívu zosvetlené $table-bg-levelvariabilným.