Bootstrap tabella semplice
Una base Bootstrap tabella ha una leggera imbottitura e solo divisori orizzontali.
Il .table classe aggiunge styling base a una tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Righe a strisce
Il .table-striped classe aggiunge zebra strisce a una tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabella delimitata
Il .table-bordered classe aggiunge confini su tutti i lati del tavolo e le celle:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Righe hover
Il .table-hover classe consente uno stato hover su righe della tabella:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabella Condensed
Il .table-condensed di classe rende un tavolo più compatto tagliando imbottitura cella a metà:
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Classi contestuali
Classi contestuali possono essere utilizzate per le righe della tabella di colore ( <tr> ) o le celle della tabella ( <td> ):
Esempio
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Le classi contestuali che possono essere utilizzati sono:
| Classe | Descrizione |
|---|---|
.active | Si applica il colore hover per la riga della tabella o cella di una tabella |
.success | Indica un'azione di successo o positiva |
.info | Indica un cambiamento informativo neutro o azione |
.warning | Indica un avvertimento che potrebbe aver bisogno di attenzione |
.danger | Indica un'azione pericolosa o potenzialmente negativo |
tabelle responsive
Il .table-responsive classe crea una tabella reattivo. Il tavolo sarà quindi scorrere orizzontalmente su dispositivi di piccole dimensioni (sotto 768px). Per la visione con qualcosa di più grande di 768px di larghezza, non c'è differenza:
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
completa Bootstrap Table Reference Bootstrap Table Reference
Per un riferimento completo di tutte le classi della tabella, vai alla nostra completa Bootstrap tabelle di riferimento .