Source

Tabelle

Documentazione ed esempi per lo stile opt-in delle tabelle (dato il loro uso prevalente nei plugin JavaScript) con Bootstrap.

Esempi

A causa dell'uso diffuso di tabelle su widget di terze parti come calendari e selettori di date, abbiamo progettato le nostre tabelle in modo che siano attivabili . Basta aggiungere la classe base .tablea any <table>, quindi estendere con stili personalizzati o le nostre varie classi di modificatori incluse.

Utilizzando il markup della tabella più semplice, ecco come .tableappaiono le tabelle basate su Bootstrap. Tutti gli stili di tabella vengono ereditati in Bootstrap 4 , il che significa che tutte le tabelle nidificate avranno lo stesso stile del genitore.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table">
  <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>

Puoi anche invertire i colori, con testo chiaro su sfondi scuri, con .table-dark.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table table-dark">
  <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>

Opzioni per la testata del tavolo

Simile alle tabelle e alle tabelle scure, usa le classi di modifica .thead-lighto .thead-darkper far <thead>apparire le s in grigio chiaro o scuro.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

Righe rigate

Utilizzare .table-stripedper aggiungere strisce zebrate a qualsiasi riga di tabella all'interno di <tbody>.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table table-striped">
  <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>

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table table-striped table-dark">
  <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>

Tavolo bordato

Aggiungi .table-borderedi bordi su tutti i lati della tabella e delle celle.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-bordered">
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-bordered table-dark">
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Righe fluttuanti

Aggiungi .table-hoverper abilitare uno stato al passaggio del mouse sulle righe della tabella all'interno di un file <tbody>.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-hover">
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-hover table-dark">
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tavolino

Aggiungi .table-smper rendere i tavoli più compatti tagliando a metà l'imbottitura delle celle.

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-sm">
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-sm table-dark">
  <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Classi contestuali

Usa le classi contestuali per colorare le righe della tabella o le singole celle.

Classe	Intestazione	Intestazione
Attivo	Cellula	Cellula
Predefinito	Cellula	Cellula
Primario	Cellula	Cellula
Secondario	Cellula	Cellula
Successo	Cellula	Cellula
Pericolo	Cellula	Cellula
Avvertimento	Cellula	Cellula
Informazioni	Cellula	Cellula
Luce	Cellula	Cellula
Scuro	Cellula	Cellula

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Le normali varianti di sfondo della tabella non sono disponibili con la tabella scura, tuttavia è possibile utilizzare utilità di testo o di sfondo per ottenere stili simili.

#	Intestazione	Intestazione
1	Cellula	Cellula
2	Cellula	Cellula
3	Cellula	Cellula
4	Cellula	Cellula
5	Cellula	Cellula
6	Cellula	Cellula
7	Cellula	Cellula
8	Cellula	Cellula
9	Cellula	Cellula

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.

Crea tabelle reattive avvolgendo qualsiasi .tablecon .table-responsive{-sm|-md|-lg|-xl}, facendo scorrere la tabella orizzontalmente a ogni max-widthpunto di interruzione fino a (ma non incluso) rispettivamente 576px, 768px, 992px e 1120px.

Tieni presente che poiché i browser attualmente non supportano le query di contesto dell'intervallo , eliminiamo le limitazioni , i prefissi min-emax- le finestre con larghezze frazionarie (che possono verificarsi in determinate condizioni su dispositivi con dpi elevati, ad esempio) utilizzando valori con maggiore precisione per questi confronti .

Didascalie

A <caption>funziona come un'intestazione per una tabella. Aiuta gli utenti con utilità per la lettura dello schermo a trovare una tabella, capire di cosa si tratta e decidere se vogliono leggerla.

Elenco degli utenti
#	Primo	Scorso	Maneggiare
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table">
  <caption>List of users</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 reattive

Le tabelle reattive consentono di scorrere facilmente le tabelle orizzontalmente. Rendi reattiva qualsiasi tabella in tutte le viste avvolgendo a .tablecon .table-responsive. Oppure, scegli un punto di interruzione massimo con cui avere una tabella reattiva fino a utilizzando .table-responsive{-sm|-md|-lg|-xl}.

Ritaglio/troncamento verticale

Le tabelle reattive utilizzano overflow-y: hidden, che ritaglia qualsiasi contenuto che va oltre i bordi inferiore o superiore della tabella. In particolare, questo può tagliare i menu a discesa e altri widget di terze parti.

Sempre reattivo

In ogni punto di interruzione, utilizzare .table-responsiveper le tabelle a scorrimento orizzontale.

#	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione
1	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula
2	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula
3	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula	Cellula

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

Specifico del punto di interruzione

Utilizzare .table-responsive{-sm|-md|-lg|-xl}secondo necessità per creare tabelle reattive fino a un particolare punto di interruzione. Da quel punto di interruzione in su, la tabella si comporterà normalmente e non scorrerà orizzontalmente.

#	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione
1	Cellula	Cellula	Cellula	Cellula	Cellula
2	Cellula	Cellula	Cellula	Cellula	Cellula
3	Cellula	Cellula	Cellula	Cellula	Cellula

#	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione
1	Cellula	Cellula	Cellula	Cellula	Cellula
2	Cellula	Cellula	Cellula	Cellula	Cellula
3	Cellula	Cellula	Cellula	Cellula	Cellula

#	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione
1	Cellula	Cellula	Cellula	Cellula	Cellula
2	Cellula	Cellula	Cellula	Cellula	Cellula
3	Cellula	Cellula	Cellula	Cellula	Cellula

#	Intestazione	Intestazione	Intestazione	Intestazione	Intestazione
1	Cellula	Cellula	Cellula	Cellula	Cellula
2	Cellula	Cellula	Cellula	Cellula	Cellula
3	Cellula	Cellula	Cellula	Cellula	Cellula

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

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

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

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