Documentazione ed esempi per lo stile delle tabelle.
Esempi
A causa dell’uso diffuso di tabelle su widget di terze parti come calendari e campi di selezione data, Bootstrap ha progettato le tabelle senza forzarne lo stile. È sufficiente aggiungere la classe .table a qualsiasi <table>, quindi estendere con stili personalizzati o con le nostre varie classi incluse di modificatori.
Usando il markup di base della tabella, ecco come appaiono le tabelle che utilizzano la classe .table in Bootstrap. Tutti gli stili di tabella sono ereditari, il che significa che tutte le tabelle annidate avranno lo stesso stile della tabella genitrice.
L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .visually-hidden.
Righe striate
Usa .table-striped per aggiungere delle striature zebrate ad ogni riga della tabella contenute in <tbody>.
Le celle contenute nel <thead> sono sempre allineate verticalmente al bottom. Le celle del <tbody> ereditano l’allineamento da <table> e sono allineate al top per default. Utilizza le classi di allineamento verticale per riallineare dove necessario.
Intestazione 1
Intestazione 2
Intestazione 3
Intestazione 4
Questa cella eredita vertical-align: middle; dalla tabella
Questa cella eredita vertical-align: middle; dalla tabella
Questa cella eredita vertical-align: middle; dalla tabella
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
Questa cella eredita vertical-align: bottom;dalla riga
Questa cella eredita vertical-align: bottom;dalla riga
Questa cella eredita vertical-align: bottom;dalla riga
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
Questa cella eredita vertical-align: middle; dalla tabella
Questa cella eredita vertical-align: middle; dalla tabella
This cell is aligned to the top.
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr><thscope="col"class="w-25">Intestazione 1</th><thscope="col"class="w-25">Intestazione 2</th><thscope="col"class="w-25">Intestazione 3</th><thscope="col"class="w-25">Intestazione 4</th></tr></thead><tbody><tr><td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td><td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td><td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td><td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td></tr><trclass="align-bottom"><td>Questa cella eredita <code>vertical-align: bottom;</code>dalla riga</td><td>Questa cella eredita <code>vertical-align: bottom;</code>dalla riga</td><td>Questa cella eredita <code>vertical-align: bottom;</code>dalla riga</td><td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td></tr><tr><td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td><td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td><tdclass="align-top">This cell is aligned to the top.</td><td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td></tr></tbody></table></div>
Annidamento
Gli stili di bordi, gli stili attivi e le varianti non sono ereditati dalle tabelle annidate.
Un <caption> funziona come un’intestazione per una tabella. Aiuta gli utenti con screen reader a trovare una tabella e capire di cosa si tratta e decidere se vogliono leggerla.
Lista degli utenti
#
Nome
Cognome
Username
1
Mario
Verdi
mario.verdi
2
Francesco
Bianchi
francesco.bianchi
3
Alessandro Rossi
@twitter
<tableclass="table table-sm"><caption>Lista degli utenti</caption><thead><tr><thscope="col">#</th><thscope="col">Nome</th><thscope="col">Cognome</th><thscope="col">Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mario</td><td>Verdi</td><td>mario.verdi</td></tr><tr><thscope="row">2</th><td>Francesco</td><td>Bianchi</td><td>francesco.bianchi</td></tr><tr><thscope="row">3</th><tdcolspan="2">Alessandro Rossi</td><td>@twitter</td></tr></tbody></table>
Per renderizzare la <caption> in cima alla tabella utilizza la classe .caption-top.
Lista degli utenti
#
Nome
Cognome
Username
1
Mario
Verdi
mario.verdi
2
Francesco
Bianchi
francesco.bianchi
3
Alessandro Rossi
@twitter
<tableclass="table sm caption-top"><caption>Lista degli utenti</caption><thead><tr><thscope="col">#</th><thscope="col">Nome</th><thscope="col">Cognome</th><thscope="col">Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mario</td><td>Verdi</td><td>mario.verdi</td></tr><tr><thscope="row">2</th><td>Francesco</td><td>Bianchi</td><td>francesco.bianchi</td></tr><tr><thscope="row">3</th><tdcolspan="2">Alessandro Rossi</td><td>@twitter</td></tr></tbody></table>
Tabelle responsive
Le tabelle responsive consentono di scorrere le tabelle orizzontalmente con facilità. Rendi ogni tabella responsive su tutti i viewports racchiudendo un .table con .table-responsive. Oppure, scegli un breakpoint massimo con il quale ottenere una tabella responsive usando .table-responsive{-sm|-md|-lg|-xl|-xxl}, rispettivamente con max-width di 576px, 768px, 992px, 1200px, 1400px.
Ritaglio / troncamento verticale
Le tabelle responsive fanno uso di overflow-y: hidden, che rimuove qualsiasi contenuto che va oltre i bordi inferiore o superiore della tabella. In particolare, questo può ritagliare i menu a discesa e altri widget di terze parti.
Sempre responsive
Attraverso ogni breakpoint, usa .table-responsive per tabelle con scorrimento verticale.
Usa .table-responsive{-sm|-md|-lg|-xl|-xxl} come necessario per creare tabelle responsive fino a un punto di interruzione particolare. Da quel punto di interruzione in su, la tabella si comporterà normalmente e non scorrerà orizzontalmente.