Source

Taules

Documentació i exemples per a l'estil d'activació de les taules (donat el seu ús predominant als connectors de JavaScript) amb Bootstrap.

Exemples

A causa de l'ús generalitzat de taules en ginys de tercers, com ara calendaris i selectors de dates, hem dissenyat les nostres taules perquè estiguin activades . Només heu d'afegir la classe base .tablea qualsevol <table>i, a continuació, ampliar-lo amb estils personalitzats o amb les nostres diferents classes modificadores incloses.

Utilitzant l'etiquetatge de taules més bàsic, aquí teniu el .tableaspecte de les taules basades en Bootstrap. Tots els estils de taula s'hereten a Bootstrap 4 , és a dir, les taules imbricades tindran l'estil de la mateixa manera que el pare.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

També podeu invertir els colors, amb text clar sobre fons fosc, amb .table-dark.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Opcions de capçalera de taula

De manera semblant a les taules i les taules fosques, utilitzeu les classes modificadores .thead-lighto .thead-darkper fer que <thead>s apareguin de color gris clar o fosc.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Files de ratlles

Utilitzeu .table-striped-lo per afegir ratlles de zebra a qualsevol fila de la taula dins del fitxer <tbody>.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Taula amb vores

Afegiu .table-borderedles vores a tots els costats de la taula i cel·les.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Taula sense vores

Afegiu .table-borderlessper a una taula sense vores.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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-borderlesstambé es pot utilitzar en taules fosques.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Files flotables

Afegeix .table-hoverper habilitar l'estat de flotació a les files de la taula dins d'un fitxer <tbody>.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Taula petita

Afegiu .table-sm-hi per fer les taules més compactes tallant el farciment cel·lular per la meitat.

# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Classes contextuals

Utilitzeu classes contextuals per acolorir files de taules o cel·les individuals.

Classe Encapçalament Encapçalament
Actiu Cèl·lula Cèl·lula
Per defecte Cèl·lula Cèl·lula
primària Cèl·lula Cèl·lula
Secundària Cèl·lula Cèl·lula
Èxit Cèl·lula Cèl·lula
Perill Cèl·lula Cèl·lula
Avís Cèl·lula Cèl·lula
Informació Cèl·lula Cèl·lula
Llum Cèl·lula Cèl·lula
Fosc Cèl·lula Cèl·lula 
<!-- 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>

Les variants de fons de taula normals no estan disponibles amb la taula fosca, però, podeu utilitzar utilitats de text o fons per aconseguir estils similars.

# Encapçalament Encapçalament
1 Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula
4 Cèl·lula Cèl·lula
5 Cèl·lula Cèl·lula
6 Cèl·lula Cèl·lula
7 Cèl·lula Cèl·lula
8 Cèl·lula Cèl·lula
9 Cèl·lula Cèl·lula 
<!-- 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>
Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.

Creeu taules responsives embolicant-ne qualsevol .tableamb .table-responsive{-sm|-md|-lg|-xl}, fent que la taula es desplaci horitzontalment a cada max-widthpunt d'interrupció de fins a (però sense incloure) 576 px, 768 px, 992 px i 1120 px, respectivament.

Tingueu en compte que, com que actualment els navegadors no admeten consultes de context d'interval , treballem amb les limitacions min-i max-els prefixos i les finestres amb amplades fraccionades (que es poden produir en determinades condicions en dispositius d'alt ppp, per exemple) mitjançant l'ús de valors amb més precisió per a aquestes comparacions. .

Subtítols

A <caption>funciona com l'encapçalament d'una taula. Ajuda els usuaris amb lectors de pantalla a trobar una taula i entendre de què es tracta i decidir si la volen llegir.

Llista d'usuaris
# Primer Darrer Gestionar
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @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>

Taules responsives

Les taules responsives permeten desplaçar-se horitzontalment amb facilitat. Fes que qualsevol taula respongui a totes les finestres visualitzades embolicant un .tableamb .table-responsive. O, escolliu un punt d'interrupció màxim amb el qual voleu tenir una taula responsiva amb .table-responsive{-sm|-md|-lg|-xl}.

Retall/truncament vertical

Les taules responsives fan servir overflow-y: hidden, que retalla qualsevol contingut que va més enllà de les vores inferior o superior de la taula. En particular, això pot retallar menús desplegables i altres ginys de tercers.

Sempre sensible

A cada punt d'interrupció, utilitzeu -lo .table-responsiveper a taules de desplaçament horitzontal.

# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Punt d'interrupció específic

Utilitzeu .table-responsive{-sm|-md|-lg|-xl}-lo segons sigui necessari per crear taules responsives fins a un punt d'interrupció concret. A partir d'aquest punt d'interrupció, la taula es comportarà amb normalitat i no es desplaçarà horitzontalment.

Aquestes taules poden semblar trencades fins que els seus estils responsius s'apliquen a amplades específiques de la finestra gràfica.

# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament Encapçalament
1 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
2 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula
3 Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula Cèl·lula 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>