HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 Tables

❮ Předchozí Další ❯

Základní tabulka Bootstrap 4

Základní stůl Bootstrap 4 má lehké polstrování a horizontální přepážky.

Třída .tablepřidává základní styl do tabulky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Pruhované řádky

Třída .table-stripedpřidá pruhy zebry do tabulky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Ohraničený stůl

Třída .table-borderedpřidá ohraničení na všechny strany tabulky a buňky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Přesuňte řádky

Třída .table-hoverpřidává efekt přechodu (šedá barva pozadí) na řádky tabulky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Černý/tmavý stůl

Třída .table-darkpřidá do tabulky černé pozadí:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tmavě pruhovaný stůl

Kombinujte .table-darka .table-stripedvytvořte tmavý pruhovaný stůl:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Vznášející se tmavý stůl

Třída .table-hoverpřidává efekt přechodu (šedá barva pozadí) na řádky tabulky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Bezokrajový stůl

Třída .table-borderlessodstraní ohraničení z tabulky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Kontextové třídy

Kontextové třídy lze použít k obarvení celé tabulky ( <table>), řádků tabulky ( <tr>) nebo buněk tabulky ( <td>).

Příklad

Firstname Lastname Email
Default Defaultson [email protected]
Primary Joe [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]
Secondary Secondson [email protected]
Light Angie [email protected]
Dark Bo [email protected]

Kontextové třídy, které lze použít, jsou:

Třída Popis
.table-primary Modrá: Označuje důležitou akci
.table-success Zelená: Označuje úspěšnou nebo pozitivní akci
.table-danger Červená: Označuje nebezpečnou nebo potenciálně negativní akci
.table-info Světle modrá: Označuje neutrální informativní změnu nebo akci
.table-warning Oranžová: Označuje varování, které může vyžadovat pozornost
.table-active Šedá: Použije barvu kurzoru na řádek tabulky nebo buňku tabulky
.table-secondary Šedá: Označuje o něco méně důležitou akci
.table-light Světle šedá tabulka nebo pozadí řádku tabulky
.table-dark Tmavě šedá tabulka nebo pozadí řádku tabulky

Barvy hlavy stolu

Třída .thead-darkpřidá černé pozadí do záhlaví tabulek a .thead-lighttřída přidá šedé pozadí do záhlaví tabulky:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Malý stůl

Třída .table-smzmenší stůl tím, že zkrátí výplň buněk na polovinu:

Příklad

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Responzivní tabulky

Třída .table-responsivev případě potřeby přidá do tabulky posuvník (když je horizontálně příliš velký):

Příklad

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

V závislosti na šířce obrazovky se také můžete rozhodnout, kdy má tabulka získat posuvník:

Třída Šířka obrazovky
.table-responsive-sm < 576 pixelů
.table-responsive-md < 768 pixelů
.table-responsive-lg < 992 pixelů
.table-responsive-xl < 1200 pixelů

Příklad

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

❮ Předchozí Další ❯