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>

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.

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

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

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

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

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