Tavule

Documentazione è esempi per l'opt-in styling of tables (datu u so usu prevalenti in i plugins JavaScript) cù Bootstrap.

In sta pagina

Panoramica

A causa di l'usu generalizatu di <table>elementi in i widgets di terze parti cum'è i calendari è i selettori di data, e tavule di Bootstrap sò opt-in . Aghjunghjite a classa di basa .tableà qualsiasi <table>, poi estende cù e nostre classi di modificatori opzionali o stili persunalizati. Tutti i stili di tavulinu ùn sò micca ereditati in Bootstrap, chì significheghja ogni tavule nidificatu pò esse stilatu indipendente da u genitore.

Utilizendu a marcatura più basica di a tavola, eccu cumu .tablesi vede e tavule basate in Bootstrap.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
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

Aduprate classi cuntestuali per culori tabelle, file di tavule o celle individuali.

Classe	Titulu	Titulu
Default	Cell	Cell
Primariu	Cell	Cell
Sicundariu	Cell	Cell
Successu	Cell	Cell
Periculu	Cell	Cell
Attenzione	Cell	Cell
Info	Cell	Cell
Luce	Cell	Cell
Scuru	Cell	Cell

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

Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .visually-hiddenclasse.

Tavulini accentuati

Righe a strisce

Aduprà .table-stripedper aghjunghje zebra-striping à qualsiasi fila di tavulinu in u <tbody>.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Queste classi ponu ancu esse aghjuntu à varianti di tavule:

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Righe sferisce

Aghjunghjite .table-hoverper attivà un statu di hover nantu à e file di tavule in un <tbody>.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Queste fila chjappà pò ancu esse cumminata cù a variante strisciata:

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Tavule attivu

Evidenziate una fila di tabella o una cellula aghjunghjendu una .table-activeclasse.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
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>

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
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>

Cumu funziona e varianti è e tavule accentuate?

Per i tavulini accentuati ( fila strisciata , fila strisciata , è tavule attive ), avemu usatu alcune tecniche per fà chì questi effetti funzionanu per tutte e nostre varianti di tavule :

Cuminciamu per stabilisce u fondu di una cellula di tavula cù a --bs-table-bgpruprietà persunalizata. Tutte e varianti di a tavula poi stabiliscenu quella pruprietà persunalizata per culurite e cellule di a tabella. In questu modu, ùn avemu micca in prublemi se i culori semi-trasparenti sò usati cum'è sfondate di tavulinu.
Allora aghjustemu una ombra di scatula inserita nantu à e cellule di u tavulu cù box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);a capa sopra à qualsiasi specificatu background-color. Perchè usemu una diffusione enormosa è senza sfocatura, u culore serà monotone. Siccomu --bs-table-accent-bgùn hè micca stabilitu per difettu, ùn avemu micca una ombra di scatula predeterminata.
Quandu sia .table-striped, .table-hovero .table-activeclassi sò aghjuntu, --bs-table-accent-bghè stabilitu à un culore semitrasparente per culurite u fondu.
Per ogni variante di tavula, generà un --bs-table-accent-bgculore cù u cuntrastu più altu sicondu quellu culore. Per esempiu, u culore di l'accentu .table-primaryhè più scuru mentre .table-darkhà un culore di accentu più chjaru.
I culori di testu è di cunfini sò generati di listessa manera, è i so culori sò ereditati per difettu.

Dietro le scene, si vede cusì:

@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 di tavulinu

Tavulini bordati

Aghjunghjite .table-borderedper e fruntiere in tutti i lati di a tavula è e cellule.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

L'utilità di culore di cunfini ponu esse aghjuntu per cambià i culori:

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Tavule senza cunfini

Aghjunghjite .table-borderlessper una tavola senza cunfini.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Picculi tavule

Aghjunghjite .table-smper fà .tablepiù compactu tagliendu tutte e cellule paddingà a mità.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Allineamentu verticale

I celluli di a tavola <thead>sò sempre verticali allinati à u fondu. I celi di u tavulu in <tbody>ereditanu u so allinamentu da <table>è sò allinati à a cima per difettu. Aduprate e classi di allineamentu verticale per riallineà induve hè necessariu.

Titre 1	Titre 2	Titre 3	Titre 4
Sta cellula eredita `vertical-align: middle;`da a tavula	Sta cellula eredita `vertical-align: middle;`da a tavula	Sta cellula eredita `vertical-align: middle;`da a tavula	Questu quì hè un testu di placeholder, destinatu à piglià un pocu di spaziu verticale, per dimustrà cumu funziona l'allineamentu verticale in e cellule precedenti.
Questa cellula eredita `vertical-align: bottom;`da a fila di a tavula	Questa cellula eredita `vertical-align: bottom;`da a fila di a tavula	Questa cellula eredita `vertical-align: bottom;`da a fila di a tavula	Questu quì hè un testu di placeholder, destinatu à piglià un pocu di spaziu verticale, per dimustrà cumu funziona l'allineamentu verticale in e cellule precedenti.
Sta cellula eredita `vertical-align: middle;`da a tavula	Sta cellula eredita `vertical-align: middle;`da a tavula	Sta cellula hè allinata à a cima.	Questu quì hè un testu di placeholder, destinatu à piglià un pocu di spaziu verticale, per dimustrà cumu funziona l'allineamentu verticale in e cellule 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

I stili di cunfini, i stili attivi è e varianti di tavule ùn sò micca ereditati da e tavule nidificate.

Primu

Ultimu

Maniglia

Marcu

Ottu

@mdo

Intestazione	Intestazione	Intestazione
A	Primu	Ultimu
B	Primu	Ultimu
C	Primu	Ultimu

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>

Cume funziona a nidificazione

Per impediscenu qualsiasi stili di filtrazione à e tavule nidificate, usemu u >selector di combinatore di u zitellu ( ) in u nostru CSS. Siccomu avemu bisognu di destinà tutte e tds è ths in u thead, tbody, è tfoot, u nostru selettore parerebbe abbastanza longu senza ellu. Comu tali, usemu u .table > :not(caption) > * > *selettore d'aspettu piuttostu stranu per destinà tutti i tds è ths di u .table, ma nimu di qualsiasi tabelle nidificate potenziali.

Nota chì si aghjunghje <tr>s cum'è figlioli diretti di una tavula, quelli <tr>seranu impannillati in un <tbody>per difettu, facendu cusì chì i nostri selettori funzionanu cum'è previstu.

Anatomia

Capu di tavulinu

Simile à i tavulini è i tavulini scuri, aduprate e classi di modificatori .table-lighto .table-darkper fà chì <thead>s parenu grisgiu chjaru o scuru.

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

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

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

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

Pede di tavula

#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter
Footer	Footer	Footer	Footer

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

Captions

A <caption>funziona cum'è un capu per una tavola. Aiuta l'utilizatori cù lettori di schermu per truvà una tavola è capisce di ciò chì si tratta è decide s'ellu volenu leghje.

Lista di utilizatori
#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Pudete ancu mette <caption>nantu à a cima di a tavula cù .caption-top.

Lista di utilizatori
#	Primu	Ultimu	Maniglia
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
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>

Tavule rispunsevuli

I tavulini responsive permettenu à i tavulini di scorri horizontalmente cun facilità. Fate chì ogni tavula risponda in tutti i vetri di vista avvolgendu un .tablecun .table-responsive. Oppure, sceglite un puntu di ruptura massimu cù quale avè una tavola responsiva finu à aduprendu .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Tagliatura / troncatura verticale

I tavulini responsivi facenu usu di overflow-y: hidden, chì clips off qualsiasi cuntenutu chì va oltre i bordi inferiori o superiori di a tavola. In particulare, questu pò tagliate i menu drop-down è altri widgets di terzu.

Sempre responsive

Attraversu ogni breakpoint, aduprate .table-responsiveper i tavulini di scorrimentu horizontale.

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint specificu

Aduprate .table-responsive{-sm|-md|-lg|-xl|-xxl}cum'è necessariu per creà tavule rispunsevuli finu à un puntu di ruptura particulare. Da quellu puntu di rottura è in su, a tavola si cumportarà nurmale è ùn scorri micca orizzontalmente.

Queste tavule ponu apparissi rotte finu à chì i so stili rispunsevuli s'applicanu à larghezze di vista specifiche.

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu	Titulu
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Loop

$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,
);

Customizing

I variàbili di fattore ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) sò usati per determinà u cuntrastu in varianti di tabella.
In più di e varianti di tavulinu chjaru è scuru, i culori di u tema sò illuminati da a $table-bg-levelvariabile.