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>

Mesa sen bordes

Engadir .table-borderlesspara unha táboa sen bordos.

# Primeira Último Manexar
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @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-borderlesstamén se pode usar en mesas escuras.

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

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.

Estas táboas poden aparecer rotas ata que os seus estilos de resposta se apliquen a anchos de visualización específicos.

# 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
2 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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>