08.12.2024

Tabela HTML com Colunas Iguais Ocupando a Largura Total: Uma Solução

Resposta Rápida

Se você precisa de uma tabela com colunas distribuições uniformemente, defina a propriedade table-layout: fixed; para o elemento <table> e defina a mesma largura em porcentagem para cada <th> ou <td>. Por exemplo, em uma tabela de três colunas, cada coluna ocuparia 33,33% da largura.

<style>
  /* Defina a largura da tabela para 100% */
  table { width: 100%; table-layout: fixed; }

  /* Assegure-se de que todas as colunas tenham largura uniforme */
  th, td { width: 33,33%; }
</style>

<table>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <!-- Outros conteúdos da tabela -->
</table>

Essa abordagem garante larguras idênticas das colunas, independentemente do conteúdo. Ajuste a porcentagem conforme o número de colunas.

Adaptabilidade a Diferentes Tamanhos de Tela

O design responsivo é um componente vital do desenvolvimento web moderno. Para manter as colunas da tabela com larguras iguais em todos os dispositivos, use valores percentuais e media queries para ajustes dinâmicos de tamanho.

/* Configurações para dispositivos móveis */
@media (max-width: 600px) {
  th, td { width: 50%; } /* Duas colunas iguais */
}

/* Configurações para tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  th, td { width: 33,33%; } /* Três colunas iguais */
}

/* Configurações para desktop */
@media (min-width: 1025px) {
  th, td { width: 25%; } /* Quatro colunas iguais */
}

Controle de Overflow e Estabilidade da Largura das Colunas

Conteúdos que excedem o tamanho definido da célula podem perturbar a estrutura da tabela. Para evitar que as colunas se expandam além da largura definida, aplique as propriedades overflow: hidden; e text-overflow: ellipsis;. Isso garante que nenhum conteúdo ultrapasse a célula.

th, td {
  width: 25%;
  /* O conteúdo não deve transbordar! */
  overflow: hidden;
  /* O texto que não cabe na célula é cortado e substituído por reticências */
  text-overflow: ellipsis;
}

Grid & Flexbox: Os Heróis do Layout

Enquanto as tabelas são nossas ferramentas confiáveis para criar grids, às vezes o Grid e o Flexbox podem ser mais convenientes para distribuir colunas com largura igual, especialmente ao lidar com dados não tabulares.

Aqui está um exemplo de uso do Flexbox:

<style>
  /* Declare os contêineres flexbox */
  .flex-container {
    display: flex;
  }
  /* Alocar espaço para cada item */
  .flex-container > div {
    flex: 1; /* Distribuição uniforme do espaço */
  }
</style>

<div class="flex-container">
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
  <div>Conteúdo 3</div>
</div>

E aqui está um exemplo com Grid:

<style>
  /* Criar auto-alocação de colunas */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Número indeterminado de colunas de 250 pixels */
  }
</style>

<div class="grid-container">
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
  <div>Conteúdo 3</div>
</div>

Visualização

Imagine uma fila de vagas de estacionamento, marcadas de forma ordenada:

Estacionamento: | 🚗 | 🚗 | 🚗 | 🚗 |

Cada vaga representa uma coluna na tabela, ocupando 100% da largura.

<table style="width:100%;" border="1">
  <tr>
    <td>🚗 Vaga 1</td><td>🚗 Vaga 2</td><td>🚗 Vaga 3</td><td>🚗 Vaga 4</td>
  </tr>
</table>

Assim como cada carro no estacionamento deve caber perfeitamente em sua vaga reservada, sua tabela deve manter consistência e harmonia em sua estrutura.

Outros Aspectos Importantes a Considerar

Trabalhando com SCSS e Usando Unidades rem

Ao trabalhar com SCSS, você pode utilizar variáveis e operações matemáticas, simplificando sua tarefa. As unidades rem são ideais para criar tamanhos de texto acessíveis e escaláveis.

/* Defina o número de colunas */
$column-count: 4;

table {
  width: 100%;
  table-layout: fixed;

  th, td {
    /* Cálculo preciso da largura de cada coluna */
    width: ((100% / $column-count) * 1%);
  }
}

Otimização Amigável ao Usuário

Definir max-width ajudará a manter a legibilidade em telas menores. A estilização consistente de th e td melhorará enormemente a compreensão do conteúdo da tabela.

Benefícios das Larguras em Porcentagem e Unidades de Viewport

As larguras em porcentagem fazem seu layout mais responsivo. As unidades de viewport (vw e vh) podem ajudar a criar layouts ainda mais flexíveis.

th, td {
  /* Cada célula ocupa 20% da largura da viewport */
  width: 20vw;
}

Links Úteis

1. Guia Completo para o Elemento Tabela | CSS-Tricks – Uma visão abrangente das capacidades das tabelas HTML e seu estilo.
2. table-layout - CSS: Folhas de Estilo em Cascata | MDN – Análise detalhada da propriedade CSS table-layout.
3. Tabelas HTML – Tutoriais sobre como criar e estilizar tabelas no W3Schools.
4. As bordas ficam distorcidas no Firefox ao usar border-collapse na tabela, position: relative no tbody ou background-color na célula - Stack Overflow – Soluções para problemas comuns com tabelas HTML/CSS.
5. Usando rem em CSS: Entendendo e Utilizando Unidades rem — SitePoint – Como tirar o máximo proveito das unidades rem em CSS.
6. Posso usar... Tabelas de suporte para HTML5, CSS3, etc. – Uma ferramenta para verificar o suporte do navegador a tecnologias web modernas.
7. Entendendo CSS Grid: Criando um Contêiner de Grid — Smashing Magazine – Um guia para usar CSS Grid na construção de layout, uma alternativa às tabelas tradicionais.

Video

Navigation