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>

Tavolo senza bordi

Aggiungi .table-borderlessper una tabella senza bordi.

# Primo Scorso Maneggiare
1 Segno Ottone @mdo
2 Giacobbe Thornton @Grasso
3 Larry l'Uccello @twitter 
<table class="table table-borderless">
  <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>

.table-borderlessutilizzabile anche su tavoli scuri.

# Primo Scorso Maneggiare
1 Segno Ottone @mdo
2 Giacobbe Thornton @Grasso
3 Larry l'Uccello @twitter 
<table class="table table-borderless 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 es. 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 , aggiriamo i limiti , 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.

Queste tabelle possono apparire interrotte fino a quando i loro stili reattivi non si applicano a larghezze di visualizzazione specifiche.

# Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
2 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula
3 Cellula Cellula Cellula Cellula Cellula Cellula Cellula Cellula 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>