Source

Tavule

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

Esempii

A causa di l'usu generalizatu di e tavule in i widgets di terze parti cum'è i calendari è i selettori di data, avemu pensatu i nostri tavule per esse opt-in . Basta aghjunghje a classa di basa .tableà qualsiasi <table>, poi estende cù stili persunalizati o e nostre diverse classi di modificatori inclusi.

Utilizendu a marcatura più basica di a tavola, eccu cumu .tablesi vede e tavule basate in Bootstrap. Tutti i stili di tavulinu sò ereditati in Bootstrap 4 , chì significheghja ogni tavule nidificatu serà stilatu in u listessu modu cum'è u genitore.

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

Pudete ancu invertisce i culori - cù u testu chjaru nantu à sfondi scuri - cù .table-dark.

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

Simile à i tavulini è i tavulini scuri, aduprate e classi di modificatori .thead-lighto .thead-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
# Primu Ultimu Maniglia
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
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 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">
  <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>
# Primu Ultimu Maniglia
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
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>

Tavola bordata

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

Tavola senza frontiere

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">
  <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-borderlesspò ancu esse usatu nantu à tavule scure.

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

Piccola tavola

Aghjunghjite .table-smper fà i tavulini più compacti tagliendu l'imbottitura cellulare in a mità.

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

Aduprate classi contestuale per colorà e file di tabella o celle individuali.

Classe Titulu Titulu
Attivu Cell Cell
Default Cell Cell
Primariu Cell Cell
Sicundariu Cell Cell
Successu Cell Cell
Periculu Cell Cell
Attenti Cell Cell
Info Cell Cell
Luce Cell Cell
Scuru Cell Cell 
<!-- 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>

Varianti di fondu di tavulinu regulare ùn sò micca dispunibili cù a tavola scura, però, pudete aduprà testu o utilità di fondo per ottene stili simili.

# Titulu Titulu
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 
<!-- 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>
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 .sr-onlyclasse.

Crea tavule responsive avvolgendu qualsiasi .tablecù .table-responsive{-sm|-md|-lg|-xl}, facendu a tavola scorri orizzontalmente à ogni max-widthpuntu di rottura finu à (ma senza include) 576px, 768px, 992px, è 1120px, rispettivamente.

Da nutà chì, postu chì i navigatori ùn supportanu attualmente e dumande di cuntestu di gamma , travagliammu attornu à e limitazioni min-è i max-prefissi è i viewports cù larghezze fraccionari (chì ponu accade in certe cundizioni in i dispositi high-dpi, per esempiu) utilizendu valori cù più precisione per questi paraguni. .

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">
  <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 à aduprà .table-responsive{-sm|-md|-lg|-xl}.

Tagliatura / troncatura verticale

I tavulini responsive 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}cum'è necessariu per creà tavule rispunsevuli finu à un puntu di rupture particulare. Da quellu puntu di rottura è sopra, a tavula 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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>