Tabelle

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

Su questa pagina

Panoramica

A causa dell'uso diffuso di <table>elementi su widget di terze parti come calendari e selettori di date, le tabelle di Bootstrap sono opt-in . Aggiungi la classe base .tablea any <table>, quindi estendi con le nostre classi di modifica facoltative o stili personalizzati. Tutti gli stili di tabella non vengono ereditati in Bootstrap, il che significa che qualsiasi tabella nidificata può avere uno stile indipendente dal genitore.

Utilizzando il markup della tabella più semplice, ecco come .tableappaiono le tabelle basate su Bootstrap.

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

Varianti

Usa le classi contestuali per colorare tabelle, righe di tabelle o singole celle.

Classe	Intestazione	Intestazione
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 .visually-hiddenclasse.

Tabelle accentate

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">
  ...
</table>

Queste classi possono anche essere aggiunte alle varianti di tabella:

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

<table class="table table-dark table-striped">
  ...
</table>

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

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

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

<table class="table table-dark table-hover">
  ...
</table>

Queste righe hoverable possono essere abbinate anche alla variante rigata:

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

<table class="table table-striped table-hover">
  ...
</table>

Tabelle attive

Evidenzia una riga o una cella di una tabella aggiungendo una .table-activeclasse.

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

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Come funzionano le varianti e le tabelle accentate?

Per le tabelle accentate ( righe a strisce , righe hoverable e tabelle attive ), abbiamo utilizzato alcune tecniche per far funzionare questi effetti per tutte le nostre varianti di tabella :

Iniziamo impostando lo sfondo di una cella di tabella con la --bs-table-bgproprietà custom. Tutte le varianti di tabella impostano quindi quella proprietà personalizzata per colorare le celle della tabella. In questo modo, non ci mettiamo nei guai se i colori semitrasparenti vengono usati come sfondi delle tabelle.
Quindi aggiungiamo un'ombreggiatura della casella interna sulle celle della tabella con box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);un livello sopra qualsiasi specificato background-color. Poiché utilizziamo un'ampia diffusione e nessuna sfocatura, il colore sarà monotono. Poiché --bs-table-accent-bgnon è impostato per impostazione predefinita, non abbiamo un'ombreggiatura predefinita.
Quando .table-stripedsi aggiungono .table-hovero .table-activele classi, --bs-table-accent-bgviene impostato su un colore semitrasparente per colorare lo sfondo.
Per ogni variante di tavolo, generiamo un --bs-table-accent-bgcolore con il contrasto più alto a seconda di quel colore. Ad esempio, il colore dell'accento .table-primaryè più scuro mentre .table-darkha un colore dell'accento più chiaro.
I colori del testo e dei bordi vengono generati allo stesso modo e i relativi colori vengono ereditati per impostazione predefinita.

Dietro le quinte sembra così:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Bordi della tabella

Tavoli bordati

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">
  ...
</table>

È possibile aggiungere utilità per il colore del bordo per cambiare i colori:

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

<table class="table table-bordered border-primary">
  ...
</table>

Tabelle 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">
  ...
</table>

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

<table class="table table-dark table-borderless">
  ...
</table>

Tavolini

Aggiungere .table-smper rendere ancora .tablepiù compatto tagliando paddinga metà tutte le cellule.

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

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

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

<table class="table table-dark table-sm">
  ...
</table>

Allineamento verticale

Le celle della tabella di <thead>sono sempre allineate verticalmente verso il basso. Le celle della tabella <tbody>ereditano il loro allineamento <table>e sono allineate in alto per impostazione predefinita. Usa le classi di allineamento verticale per riallineare dove necessario.

Titolo 1	Titolo 2	Titolo 3	Titolo 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	Questo qui è un testo segnaposto, destinato a occupare un bel po' di spazio verticale, per dimostrare come funziona l'allineamento verticale nelle celle precedenti.
Questa cella eredita `vertical-align: bottom;`dalla riga della tabella	Questa cella eredita `vertical-align: bottom;`dalla riga della tabella	Questa cella eredita `vertical-align: bottom;`dalla riga della tabella	Questo qui è un testo segnaposto, destinato a occupare un bel po' di spazio verticale, per dimostrare come funziona l'allineamento verticale nelle celle precedenti.
Questa cella eredita `vertical-align: middle;`dalla tabella	Questa cella eredita `vertical-align: middle;`dalla tabella	Questa cella è allineata in alto.	Questo qui è un testo segnaposto, destinato a occupare un bel po' di spazio verticale, per dimostrare come funziona l'allineamento verticale nelle celle precedenti.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nidificazione

Gli stili del bordo, gli stili attivi e le varianti di tabella non vengono ereditati dalle tabelle nidificate.

Primo

Scorso

Maneggiare

Segno

Ottone

@mdo

Intestazione	Intestazione	Intestazione
UN	Primo	Scorso
B	Primo	Scorso
C	Primo	Scorso

Larry

l'uccello

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Come funziona la nidificazione

Per evitare che qualsiasi stile trapeli nelle tabelle nidificate, utilizziamo il >selettore figlio combinatore ( ) nel nostro CSS. Dal momento che abbiamo bisogno di scegliere come target tutti i tds e ths in thead, tbody, e tfoot, il nostro selettore sembrerebbe piuttosto lungo senza di esso. Pertanto, utilizziamo il .table > :not(caption) > * > *selettore dall'aspetto piuttosto strano per scegliere come target tutte le tds e thle .table, ma nessuna delle potenziali tabelle nidificate.

Nota che se aggiungi <tr>s come figli diretti di una tabella, quelli <tr>verranno racchiusi in a <tbody>per impostazione predefinita, facendo così funzionare i nostri selettori come previsto.

Anatomia

Testata da tavolo

Simile alle tabelle e alle tabelle scure, usa le classi di modifica .table-lighto .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Piede da tavolo

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

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Puoi anche mettere il <caption>sopra il tavolo con .caption-top.

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

<table class="table caption-top">
  <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|-xxl}.

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|-xxl}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

#	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

#	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

#	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

#	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

#	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">
  <table class="table">
    ...
  </table>
</div>

<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>

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

Sass

Variabili

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Ciclo continuo

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Personalizzazione

Le variabili fattore ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) vengono utilizzate per determinare il contrasto nelle varianti di tabella.
A parte le varianti del tavolo chiaro e scuro, i colori del tema sono alleggeriti dalla $table-bg-levelvariabile.