09.02.2025

Definindo Larguras de Colunas em Tabelas CSS: Layout Fixo

Resposta Rápida

Para aumentar a largura de uma coluna específica em uma tabela com layout fixo (table-layout: fixed), especifique o atributo width diretamente para o th ou td da coluna que você deseja modificar.

<table style="table-layout: fixed;">
  <colgroup>
    <col>
    <col style="width: 200px;"> <!-- Aqui está, a coluna com largura aumentada! -->
    <col>
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <!-- continuação da tabela... -->
</table>

Essa abordagem permite que você aumente a largura da coluna desejada, mantendo as larguras das outras colunas inalteradas. É simples!

Larguras de Colunas Sob Nosso Controle

Se você precisar controlar a largura de cada coluna individualmente, use regras CSS da seguinte maneira:

<col style="width: 150px;"> <!-- Isso é como "parar" um carro pequeno em uma vaga grande -->
<col> <!-- As colunas restantes terão largura automática -->

Assim, uma largura específica é definida para a primeira coluna, enquanto as demais colunas permanecem adaptativas e se ajustam de acordo com seu conteúdo.

Compreendendo Fixo e Automático

Ao definir table-layout: fixed;, você informa ao navegador que as larguras das colunas são predefinidas e não devem mudar. Isso é semelhante a um voo reservado com todos os assentos vendidos.

table { 
  width: 100%; 
  table-layout: fixed; /* Equivalente ao aeroporto durante os horários de pico */
}

Portanto, se as larguras das colunas não forem especificadas, elas compartilharão igualmente o espaço restante.

Usando nth-child em Situações Complexas

Em situações mais complexas, você pode ajustar a largura de elementos específicos usando o seletor nth-child:

table th:nth-child(2), 
table td:nth-child(2) { 
  width: 200px; /* Exemplo de alteração da largura de uma coluna específica */
}

.larga {
  width: 200px;
}

Este exemplo mostra como tornar a segunda célula em cada linha mais larga, quase tornando-a o centro das atenções da tabela.

Visualização

É mais fácil comparar a disposição das larguras das colunas com vagas de estacionamento:

| Carro |     |     |     |     |  -> Vagas de estacionamento comuns

Se precisarmos de mais espaço para um ônibus, aumentamos o tamanho da vaga:

| Carro |     | 🚍   |     |     |  -> Aqui está uma vaga VIP para o "ônibus"

Quando usamos HTML, o espaço extra para uma coluna específica se torna análogo ao estacionamento pessoal:

<table style="table-layout: fixed; width: 100%;">
  <colgroup>
    <col style="width: 25%;">
    <col style="width: 25%;">
    <col style="width: 35%;"> <!-- Esta é sua coluna VIP pessoal -->
    <col style="width: 15%;">
  </colgroup>
  <!-- corpo da tabela -->
</table>

Conseguindo "Colapso de Borda"

Aplicar a regra CSS border-collapse: collapse; evita espaços indesejados entre as células, criando um visual elegante para a tabela.

table {
  border-collapse: collapse; /* A tabela não tem mais lacunas */
}

Dinamismo e Flexibilidade no Design

Os tamanhos das tabelas podem variar. Para tabelas menores, pode ser melhor evitar larguras fixas, permitindo ajustes dinâmicos.

Duas Tabelas Lado a Lado - Um Caso Raro

Às vezes, usar duas tabelas separadas lado a lado pode resolver um desafio específico de design.

<!-- Tabela separada para a primeira coluna -->
<table style="float: left; width: 300px;">
  <!-- conteúdo para a primeira coluna aqui -->
</table>

<!-- Tabela separada para as colunas restantes -->
<table style="float: left; width: auto;">
  <!-- conteúdo para as colunas restantes aqui -->
</table>

Veja Um Exemplo em Ação!

A melhor maneira de entender esses conceitos é vê-los em ação. Confira este link do jsfiddle para uma demonstração interativa.

Recursos Úteis

1. Tabelas - W3C — Diretrizes básicas para a criação de tabelas HTML.
2. table-layout - CSS: Folhas de Estilo em Cascata | MDN — Um guia para o uso de layouts de tabela fixos.
3. Guia Completo do Elemento de Tabela | CSS-Tricks — Uma visão geral das funcionalidades e capacidades das tabelas HTML.
4. Tabelas de Dados Responsivas | CSS-Tricks — Soluções para tabelas adaptativas com rolagem.
5. Top 10 Designs de Tabelas CSS — Smashing Magazine — Alguns designs de tabelas interessantes para inspiração.
6. .width() | Documentação da API jQuery — Se você precisar de algo além de HTML e CSS, o jQuery está à sua disposição.

Video

Navigation