Bootstrap 4 Tabelle
Bootstrap 4 Tabella di base
Un tavolo Bootstrap 4 di base ha un'imbottitura leggera e divisori orizzontali.
La .tableclasse aggiunge uno stile di base a un tavolo:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Righe a righe
La .table-stripedclasse aggiunge strisce zebrate a una tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tavolo bordato
La .table-borderedclasse aggiunge i bordi su tutti i lati della tabella e delle celle:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Righe al passaggio del mouse
La .table-hoverclasse aggiunge un effetto al passaggio del mouse (colore di sfondo grigio) sulle righe della tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tavolo nero/scuro
La .table-darkclasse aggiunge uno sfondo nero alla tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tavolo a righe scure
Combina .table-darke .table-stripedper creare un tavolo scuro a strisce:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tavolo scuro fluttuante
La .table-hoverclasse aggiunge un effetto al passaggio del mouse (colore di sfondo grigio) sulle righe della tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tavolo senza bordi
La .table-borderlessclasse rimuove i bordi dalla tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Classi contestuali
Le classi contestuali possono essere utilizzate per colorare l'intera tabella ( <table>), le righe della tabella ( <tr>) o le celle della tabella ( <td>).
Esempio
| Firstname | Lastname | |
|---|---|---|
| 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] |
Le classi contestuali utilizzabili sono:
| Classe | Descrizione |
|---|---|
.table-primary |
Blu: indica un'azione importante |
.table-success |
Verde: indica un'azione riuscita o positiva |
.table-danger |
Rosso: indica un'azione pericolosa o potenzialmente negativa |
.table-info |
Azzurro: indica un cambiamento o un'azione informativa neutra |
.table-warning |
Arancione: indica un avviso che potrebbe richiedere attenzione |
.table-active |
Grigio: applica il colore al passaggio del mouse alla riga della tabella o alla cella della tabella |
.table-secondary |
Grigio: indica un'azione leggermente meno importante |
.table-light |
Sfondo grigio chiaro o riga di tabella |
.table-dark |
Sfondo grigio scuro della tabella o della riga della tabella |
Colori della testata del tavolo
La .thead-darkclasse aggiunge uno sfondo nero alle intestazioni delle tabelle e la .thead-lightclasse aggiunge uno sfondo grigio alle intestazioni delle tabelle:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tavolino
La .table-smclasse rimpicciolisce il tavolo tagliando a metà il riempimento delle celle:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabelle reattive
La .table-responsiveclasse aggiunge una barra di scorrimento alla tabella quando necessario (quando è troppo grande in orizzontale):
Esempio
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Puoi anche decidere quando la tabella dovrebbe avere una barra di scorrimento, a seconda della larghezza dello schermo:
| Classe | Larghezza dello schermo |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
<768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
Esempio
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>