Ir para o conteúdo principal Pular para a navegação de documentos
Check
in English

Tabelas

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

Visão geral

Devido ao uso generalizado de <table>elementos em widgets de terceiros, como calendários e seletores de data, as tabelas do Bootstrap são opcionais . Adicione a classe base .tablea any <table>e, em seguida, estenda com nossas classes modificadoras opcionais ou estilos personalizados. Todos os estilos de tabela não são herdados no Bootstrap, o que significa que qualquer tabela aninhada pode ser estilizada independentemente do pai.

Usando a marcação de tabela mais básica, veja como as .tabletabelas baseadas em Bootstrap se parecem.

# 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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variantes

Use classes contextuais para colorir tabelas, linhas de tabela ou células individuais.

Classe Cabeçalho Cabeçalho
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
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 .visually-hiddenclasse.

Tabelas acentuadas

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">
  ...
</table>

Colunas listradas

Use .table-striped-columnspara adicionar listras de zebra a qualquer coluna da tabela.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-striped-columns">
  ...
</table>

Essas classes também podem ser adicionadas a variantes de tabela:

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-dark table-striped">
  ...
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-dark table-striped-columns">
  ...
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-success table-striped">
  ...
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-success table-striped-columns">
  ...
</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">
  ...
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-dark table-hover">
  ...
</table>

Essas linhas flutuantes também podem ser combinadas com a variante de linhas listradas:

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-striped table-hover">
  ...
</table>

Tabelas ativas

Realce uma linha ou célula da tabela adicionando uma .table-activeclasse.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Como funcionam as variantes e tabelas acentuadas?

Para as tabelas acentuadas ( linhas listradas , colunas listradas , linhas flutuantes e tabelas ativas ), usamos algumas técnicas para fazer esses efeitos funcionarem para todas as nossas variantes de tabela :

  • Começamos definindo o plano de fundo de uma célula da tabela com a --bs-table-bgpropriedade customizada. Todas as variantes de tabela definem essa propriedade customizada para colorir as células da tabela. Dessa forma, não teremos problemas se cores semitransparentes forem usadas como plano de fundo da tabela.
  • Em seguida, adicionamos uma sombra de caixa de inserção nas células da tabela com box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);a camada em cima de qualquer arquivo background-color. Como usamos um spread enorme e sem desfoque, a cor ficará monótona. Como --bs-table-accent-bgnão está definido por padrão, não temos uma sombra de caixa padrão.
  • Quando as classes .table-striped, .table-striped-columns, .table-hoverou são adicionadas, o é definido como uma cor semitransparente para colorir o plano de fundo..table-active--bs-table-accent-bg
  • Para cada variante de tabela, geramos uma --bs-table-accent-bgcor com o maior contraste dependendo dessa cor. Por exemplo, a cor de destaque para .table-primaryé mais escura enquanto .table-darktem uma cor de destaque mais clara.
  • As cores do texto e da borda são geradas da mesma maneira e suas cores são herdadas por padrão.

Nos bastidores é assim:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Bordas da tabela

Tabelas 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">
  ...
</table>

Os utilitários de cores de borda podem ser adicionados para alterar as cores:

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-bordered border-primary">
  ...
</table>

Mesas sem bordas

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">
  ...
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-dark table-borderless">
  ...
</table>

Mesas pequenas

Adicione .table-smpara tornar .tablemais compacto cortando todas as células paddingao meio.

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-sm">
  ...
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table table-dark table-sm">
  ...
</table>

Divisores de grupo de mesa

Adicione uma borda mais grossa, mais escura entre os grupos <thead>de tabelas — <tbody>, e <tfoot>—com .table-group-divider. Personalize a cor alterando o border-top-color(para o qual não fornecemos uma classe de utilidade no momento).

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

Alinhamento vertical

As células da tabela <thead>são sempre alinhadas verticalmente na parte inferior. As células da tabela <tbody>herdam seu alinhamento <table>e são alinhadas na parte superior por padrão. Use as classes de alinhamento vertical para realinhar quando necessário.

Cabeçallho 1 Título 2 Título 3 Título 4
Esta célula herda vertical-align: middle;da tabela Esta célula herda vertical-align: middle;da tabela Esta célula herda vertical-align: middle;da tabela Este aqui é um texto de espaço reservado, destinado a ocupar um pouco de espaço vertical, para demonstrar como o alinhamento vertical funciona nas células anteriores.
Esta célula herda vertical-align: bottom;da linha da tabela Esta célula herda vertical-align: bottom;da linha da tabela Esta célula herda vertical-align: bottom;da linha da tabela Este aqui é um texto de espaço reservado, destinado a ocupar um pouco de espaço vertical, para demonstrar como o alinhamento vertical funciona nas células anteriores.
Esta célula herda vertical-align: middle;da tabela Esta célula herda vertical-align: middle;da tabela Esta célula está alinhada ao topo. Este aqui é um texto de espaço reservado, destinado a ocupar um pouco de espaço vertical, para demonstrar como o alinhamento vertical funciona nas células anteriores.
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Aninhamento

Estilos de borda, estilos ativos e variantes de tabela não são herdados por tabelas aninhadas.

# Primeiro Último Lidar com
1 Marca Otto @mdo
Cabeçalho Cabeçalho Cabeçalho
UMA Primeiro Último
B Primeiro Último
C Primeiro Último
3 Larry o pássaro @Twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Como funciona o aninhamento

Para evitar que qualquer estilo vaze para tabelas aninhadas, usamos o >seletor de combinação filho ( ) em nosso CSS. Como precisamos segmentar todos os tds e ths no thead, tbody, e tfoot, nosso seletor ficaria bem longo sem ele. Como tal, usamos o .table > :not(caption) > * > *seletor de aparência bastante estranha para direcionar todos os tds e ths do .table, mas nenhuma das tabelas aninhadas em potencial.

Observe que, se você adicionar <tr>s como filhos diretos de uma tabela, eles <tr>serão agrupados em a <tbody>por padrão, fazendo com que nossos seletores funcionem conforme o esperado.

Anatomia

Cabeça de mesa

Semelhante a tabelas e tabelas escuras, use as classes modificadoras .table-lightou .table-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
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Pé de mesa

# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
Rodapé Rodapé Rodapé Rodapé
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Você também pode colocar o <caption>no topo da mesa com .caption-top.

Lista de usuários
# Primeiro Último Lidar com
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter
html
<table class="table caption-top">
  <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|-xxl}.

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|-xxl}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
# 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
# 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
# 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
# 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
# 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">
  <table class="table">
    ...
  </table>
</div>

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

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

Sass

Variáveis

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Ciclo

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Personalização

  • As variáveis ​​fatoriais ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) são usadas para determinar o contraste nas variantes da tabela.
  • Além das variantes de mesa claras e escuras, as cores do tema são iluminadas pela $table-bg-scalevariável.