Source

Táboas

Documentación e exemplos para o estilo de opción de táboas (dado o seu uso predominante nos complementos de JavaScript) con Bootstrap.

Exemplos

Debido ao uso xeneralizado de táboas en widgets de terceiros, como calendarios e seleccionadores de datas, deseñamos as nosas táboas para que se habiliten . Só ten que engadir a clase base .tablea calquera <table>e, a continuación, ampliar con estilos personalizados ou as nosas diversas clases modificadoras incluídas.

Usando o marcado de táboas máis básico, velaí como .tablese ven as táboas baseadas en Bootstrap. Todos os estilos de táboa herdanse en Bootstrap 4 , o que significa que as táboas aniñadas terán o mesmo estilo que o pai.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

Tamén podes inverter as cores (con texto claro sobre fondos escuros) con .table-dark.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

Opcións de cabeza de táboa

Semellante ás táboas e ás táboas escuras, use as clases modificadoras .thead-lightou .thead-darkpara facer que <thead>s apareza en gris claro ou escuro.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

Filas a raias

Utilízao .table-stripedpara engadir franxas de cebra a calquera fila da táboa dentro do <tbody>.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

Mesa con bordes

Engade .table-borderedos bordos en todos os lados da táboa e das celas.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

Filas flotables

Engadir .table-hoverpara activar un estado de paso nas filas da táboa dentro dun <tbody>.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

Mesa pequena

Engade .table-smpara facer as táboas máis compactas cortando o recheo celular á metade.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

Clases contextuais

Use clases contextuais para colorear filas de táboas ou celas individuais.

Clase	Título	Título
Activo	Célula	Célula
Por defecto	Célula	Célula
Primaria	Célula	Célula
Secundaria	Célula	Célula
Éxito	Célula	Célula
Perigo	Célula	Célula
Aviso	Célula	Célula
Información	Célula	Célula
Luz	Célula	Célula
Escuro	Célula	Cé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>

As variantes habituais do fondo da táboa non están dispoñibles coa táboa escura; non obstante, pode usar utilidades de texto ou de fondo para conseguir estilos similares.

#	Título	Título
1	Célula	Célula
2	Célula	Célula
3	Célula	Célula
4	Célula	Célula
5	Célula	Célula
6	Célula	Célula
7	Célula	Célula
8	Célula	Célula
9	Célula	Cé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>

Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.

Crea táboas sensibles envolvendo calquera .tablecon .table-responsive{-sm|-md|-lg|-xl}, facendo que a táboa se desprace horizontalmente en cada max-widthpunto de interrupción de ata (pero sen incluír) 576px, 768px, 992px e 1120px, respectivamente.

Teña en conta que, dado que actualmente os navegadores non admiten consultas de contexto de intervalos , traballamos sobre as limitacións min-e os max-prefixos e as ventás gráficas con anchos fraccionarios (que poden ocorrer en determinadas condicións en dispositivos de alta ppp, por exemplo) mediante o uso de valores con maior precisión para estas comparacións. .

Subtítulos

A <caption>funciona como un título para unha táboa. Axuda aos usuarios con lectores de pantalla a atopar unha táboa e comprender de que se trata e decidir se queren lela.

Lista de usuarios
#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

Táboas sensibles

As táboas sensibles permiten desprazarse horizontalmente con facilidade. Fai que calquera táboa responda en todas as ventanas gráficas envolvendo un .tablecon .table-responsive. Ou escolle un punto de interrupción máximo co que queiras ter unha táboa receptiva usando .table-responsive{-sm|-md|-lg|-xl}.

Recorte/truncamento vertical

As táboas sensibles fan uso de overflow-y: hidden, que recorta calquera contido que vaia máis aló dos bordos inferior ou superior da táboa. En particular, isto pode cortar os menús despregables e outros widgets de terceiros.

Sempre receptivo

En cada punto de interrupción, úsao .table-responsivepara táboas de desprazamento horizontal.

#	Título	Título	Título	Título	Título	Título	Título	Título	Título
1	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula

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

Punto de interrupción específico

Utilízase .table-responsive{-sm|-md|-lg|-xl}segundo sexa necesario para crear táboas receptivas ata un punto de interrupción particular. A partir dese punto de interrupción, a táboa comportarase normalmente e non desprazarase horizontalmente.

#	Título	Título	Título	Título	Título
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Título	Título	Título	Título	Título
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Título	Título	Título	Título	Título
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Título	Título	Título	Título	Título
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Cé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>