Tabelle
Documentazione ed esempi per lo stile delle tabelle.
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 nidificate saranno stilizzate nello stesso modo del genitore.
Puoi anche invertire i colori, con testo chiaro su sfondi scuri con .table-dark.
| # | Nome | Cognome | Username |
|---|---|---|---|
| 1 | Mario | Verdi | mario.verdi |
| 2 | Francesco | Bianchi | francesco.bianchi |
| 3 | Alessandro | Rossi | alessandro.rossi |
| # | Nome | Cognome | Username |
|---|---|---|---|
| 1 | Mario | Verdi | mario.verdi |
| 2 | Francesco | Bianchi | francesco.bianchi |
| 3 | Alessandro | Rossi | alessandro.rossi |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nome</th>
<th scope="col">Cognome</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mario</td>
<td>Verdi</td>
<td>mario.verdi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Francesco</td>
<td>Bianchi</td>
<td>francesco.bianchi</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Alessandro</td>
<td>Rossi</td>
<td>alessandro.rossi</td>
</tr>
</tbody>
</table><p></p>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nome</th>
<th scope="col">Cognome</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mario</td>
<td>Verdi</td>
<td>mario.verdi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Francesco</td>
<td>Bianchi</td>
<td>francesco.bianchi</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Alessandro</td>
<td>Rossi</td>
<td>alessandro.rossi</td>
</tr>
</tbody>
</table>Righe compatte
Aggiungi .table-sm per rendere le tabelle più compatte dimezzando il cell padding. La classe .table-hover in esempio invece fa sì che la riga venga evideniata al passaggio del mouse.
| # | Nome | Cognome | Username |
|---|---|---|---|
| 1 | Mario | Verdi | mario.verdi |
| 2 | Francesco | Bianchi | francesco.bianchi |
| 3 | Alessandro | Rossi | alessandro.rossi |
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nome</th>
<th scope="col">Cognome</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mario</td>
<td>Verdi</td>
<td>mario.verdi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Francesco</td>
<td>Bianchi</td>
<td>francesco.bianchi</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Alessandro</td>
<td>Rossi</td>
<td>alessandro.rossi</td>
</tr>
</tbody>
</table>Captions
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.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<caption>Lista di utenti</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</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}.
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.
| # | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cella | Cella | Cella | Cella | Cella | Cella | Cella | Cella | Cella |
| 2 | Cella | Cella | Cella | Cella | Cella | Cella | Cella | Cella | Cella |
| 3 | Cella | Cella | Cella | Cella | Cella | Cella | Cella | Cella | Cella |
<div class="table-responsive"><table class="table">
....
</table></div>Breakpoint specifici
Usa .table-responsive{-sm|-md|-lg|-xl} 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.
| # | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione |
|---|---|---|---|---|---|
| 1 | Cella | Cella | Cella | Cella | Cella |
| 2 | Cella | Cella | Cella | Cella | Cella |
| 3 | Cella | Cella | Cella | Cella | Cella |
| # | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione |
|---|---|---|---|---|---|
| 1 | Cella | Cella | Cella | Cella | Cella |
| 2 | Cella | Cella | Cella | Cella | Cella |
| 3 | Cella | Cella | Cella | Cella | Cella |
| # | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione |
|---|---|---|---|---|---|
| 1 | Cella | Cella | Cella | Cella | Cella |
| 2 | Cella | Cella | Cella | Cella | Cella |
| 3 | Cella | Cella | Cella | Cella | Cella |
| # | Intestazione | Intestazione | Intestazione | Intestazione | Intestazione |
|---|---|---|---|---|---|
| 1 | Cella | Cella | Cella | Cella | Cella |
| 2 | Cella | Cella | Cella | Cella | Cella |
| 3 | Cella | Cella | Cella | Cella | Cella |
<div class="table-responsive-sm">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive-md">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
<th scope="col">Intestazione</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
<td>Cella</td>
</tr>
</tbody>
</table>
</div>
</div>