Bootstrap 5 Tabelle

Tabella di base

Una tabella Bootstrap 5 di base ha un leggero spaziatore interno e una linea di separazione orizzontale.

.table Aggiungi uno stile di base alla tabella:

Esempio

Prova direttamente

Righe a strisce

.table-striped Aggiungi strisce zebra alla tabella:

Esempio

Prova direttamente

Tabella con bordi

.table-bordered Aggiungi bordi a tutti i lati della tabella e delle celle:

Esempio

Prova direttamente

Riga con hover

.table-hover Aggiungi un effetto di hover (sfondo grigio) alle righe della tabella:

Esempio

Prova direttamente

Tabella nera/scura

.table-dark Aggiungi uno sfondo nero alla tabella:

Esempio

Prova direttamente

Tabella a strisce scure

combinato .table-dark e .table-striped Per creare una tabella a strisce scure:

Esempio

Prova direttamente

Tabella scura con hover

.table-hover Aggiungi un effetto di hover (sfondo grigio) alle righe della tabella:

Esempio

Prova direttamente

Tabella senza bordi

.table-borderless Elimina i bordi dalla tabella:

Esempio

Prova direttamente

Classi contestuali

Le classi contestuali possono essere utilizzate per l'intera tabella (<table>) o riga della tabella (<tr>) o cella della tabella (<td>) Colorazione.

Esempio

Prova direttamente

Classi contestuali disponibili:

Classe Descrizione
.table-primary Blu: indica azioni importanti.
.table-success Verde: indica azioni di successo o positive.
.table-danger Rosso: indica pericoli o comportamenti negativi potenziali.
.table-info Blu chiaro: indica modifiche informative o operazioni neutre.
.table-warning Arancione: indica avvisi che potrebbero richiedere attenzione.
.table-active Grigio: applica il colore di hover alle righe o alle celle della tabella.
.table-secondary Grigio: indica azioni di minore importanza.
.table-light Tabella o riga di tabella di colore chiaro.
.table-dark Tabella o riga di tabella di colore scuro.

Colore dell'intestazione della tabella

Puoi anche utilizzare qualsiasi classe contestuale per aggiungere solo il colore di sfondo al titolo della tabella:

Esempio

Prova direttamente

Tabella piccola

.table-sm La classe riduce la dimensione della tabella dimezzando il riempimento delle celle:

Esempio

Prova direttamente

Tabella responsive

.table-responsive Aggiungi la barra di scorrimento alla tabella quando necessario (quando è troppo grande in direzione orizzontale):

Esempio

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

Prova direttamente

Puoi anche decidere quando la tabella dovrebbe ottenere la barra di scorrimento, a seconda della larghezza dello schermo:

Classe Larghezza dello schermo
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Esempio

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

Prova direttamente