Passà à u cuntenutu principale Salta à a navigazione di documenti
Check
in English

Tavule

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

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>

Culonni à strisce

Aduprà .table-striped-columnsper aghjunghje zebra-striping à qualsiasi colonna di tavula.

# Primu Ultimu Maniglia
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter
<table class="table table-striped-columns">
  ...
</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-dark table-striped-columns">
  ...
</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>
# Primu Ultimu Maniglia
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter
<table class="table table-success table-striped-columns">
  ...
</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 arrubbata pò ancu esse cumminata cù a variante di fila 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 e tavule accentuate ( fila strisciata , colonne strisciate , 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-striped-columns, .table-hovero .table-activeclassi sò aghjuntu, u --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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

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>

Divisori di gruppi di tavulinu

Aghjunghjite un cunfini più grossu, più scuru trà i gruppi di tavule - <thead>, <tbody>, è - <tfoot>.table-group-divider. Personalizà u culore cambiendu u border-top-color(chì ùn furnimu micca attualmente una classa di utilità per questu mumentu).

# Primu Ultimu Maniglia
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter
html
<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 class="table-group-divider">
    <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>

Allineamentu verticale

I celluli di a tavola <thead>sò sempre verticali allinati à u fondu. I celi di a tabella in <tbody>ereditanu u so allinamentu da <table>è sò allinati à u 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
1 Marcu Ottu @mdo
Intestazione Intestazione Intestazione
A Primu Ultimu
B Primu Ultimu
C Primu Ultimu
3 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
html
<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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$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-scalevariabile.