Source

Tabelas

Documentação e exemplos para o estilo opt-in de tabelas (dado seu uso predominante em plugins JavaScript) com Bootstrap.

Exemplos

Devido ao uso generalizado de tabelas em widgets de terceiros, como calendários e seletores de data, projetamos nossas tabelas para serem opt-in . Basta adicionar a classe base .tablea qualquer <table>, depois estender com estilos personalizados ou nossas várias classes modificadoras incluídas.

Usando a marcação de tabela mais básica, veja como as .tabletabelas baseadas em Bootstrap se parecem. Todos os estilos de tabela são herdados no Bootstrap 4 , o que significa que qualquer tabela aninhada será estilizada da mesma maneira que o pai.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Você também pode inverter as cores—com texto claro em fundos escuros—com .table-dark.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Opções de cabeça de mesa

Semelhante a tabelas e tabelas escuras, use as classes modificadoras .thead-lightou .thead-darkpara fazer <thead>s parecer cinza claro ou escuro.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Linhas listradas

Use .table-stripedpara adicionar listras de zebra a qualquer linha da tabela dentro do arquivo <tbody>.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Tabela com bordas

Adicione .table-borderedpara bordas em todos os lados da tabela e células.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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 sem borda

Adicionar .table-borderlesspara uma tabela sem bordas.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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ém pode ser usado em mesas escuras.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Linhas flutuantes

Adicione .table-hoverpara habilitar um estado de foco nas linhas da tabela em um arquivo <tbody>.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Pequena mesa

Adicione .table-smpara tornar as tabelas mais compactas cortando o preenchimento das células pela metade.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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 contextuais

Use classes contextuais para colorir linhas da tabela ou células individuais.

Classe Cabeçalho Cabeçalho
Ativo Célula Célula
Predefinição Célula Célula
Primário Célula Célula
Secundário Célula Célula
Sucesso Célula Célula
Perigo Célula Célula
Aviso Célula Célula
Informações Célula Célula
Leve 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 de plano de fundo da tabela regular não estão disponíveis com a tabela escura, no entanto, você pode usar utilitários de texto ou plano de fundo para obter estilos semelhantes.

# Cabeçalho Cabeçalho
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>
Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.

Crie tabelas responsivas envolvendo qualquer uma .tablecom .table-responsive{-sm|-md|-lg|-xl}, fazendo a tabela rolar horizontalmente em cada max-widthponto de interrupção de até (mas não incluindo) 576px, 768px, 992px e 1120px, respectivamente.

Observe que, como os navegadores atualmente não suportam consultas de contexto de intervalo , contornamos as limitações min-e max-prefixos e viewports com larguras fracionárias (o que pode ocorrer sob certas condições em dispositivos de alto dpi, por exemplo) usando valores com maior precisão para essas comparações .

Legendas

A <caption>funciona como um cabeçalho para uma tabela. Ele ajuda os usuários com leitores de tela a encontrar uma tabela e entender do que se trata e decidir se querem lê-la.

Lista de usuários
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @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>

Tabelas responsivas

As tabelas responsivas permitem que as tabelas sejam roladas horizontalmente com facilidade. Torne qualquer tabela responsiva em todas as janelas de visualização envolvendo um .tablecom .table-responsive. Ou escolha um ponto de interrupção máximo com o qual ter uma tabela responsiva usando .table-responsive{-sm|-md|-lg|-xl}.

Corte/truncamento vertical

As tabelas responsivas fazem uso de overflow-y: hidden, que corta qualquer conteúdo que vá além das bordas inferior ou superior da tabela. Em particular, isso pode cortar menus suspensos e outros widgets de terceiros.

Sempre responsivo

Em todos os pontos de interrupção, use .table-responsivepara tabelas de rolagem horizontal.

# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho
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>

Ponto de interrupção específico

Use .table-responsive{-sm|-md|-lg|-xl}conforme necessário para criar tabelas responsivas até um ponto de interrupção específico. A partir desse ponto de interrupção, a tabela se comportará normalmente e não rolará horizontalmente.

Essas tabelas podem parecer quebradas até que seus estilos responsivos se apliquem a larguras de janela de visualização específicas.

# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho
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>
# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho
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>
# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho
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>
# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho
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>