Curso de CSS / Tabelas: bordas, dimensões e table-layout

O layout de tabelas CSS distribui o espaço das colunas de acordo com as regras de dimensionamento da tabela e o conteúdo. table-layout: auto considera o conteúdo das células, enquanto o layout fixo pode tornar o dimensionamento das colunas mais previsível quando a tabela possui largura explícita.

Separe a largura da tabela e o padding das células

table { width: 100%; border-collapse: collapse; }

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

width: 100% diz à tabela para se dimensionar com base na largura de seu elemento pai. O espaço dentro da célula é definido como padding, e a borda é definida como border. border-collapse: collapse é um método de exibir as bordas de células adjacentes mesclando-as. Definir a largura da tabela e definir quebras de linha no conteúdo são coisas separadas.

Uma tabela com width: 100% nem sempre se ajusta dentro de seu elemento pai. Conteúdo que não quebra ou uma largura mínima grande podem fazer com que a tabela real ou o conteúdo da célula fiquem mais largos. Em tabelas de dados típicas, é seguro deixar a altura das células crescer para corresponder ao comprimento da frase. Se você der uma altura fixa, será necessário verificar se há truncamento ao aumentar o texto ou adicionar conteúdo.

Distribua as colunas de acordo com o conteúdo

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

O exercício divide o nome curto do item e a descrição longa em duas colunas. O exemplo usa a proporção 30:70 para dar mais espaço à descrição. Se os dados reais consistirem em datas, preços, descrições longas etc., distribua-os de acordo com o papel de cada coluna. Se a colocação automática padrão for suficientemente legível, não há necessidade de forçar a proporção.

Ao especificar uma porcentagem de toda a coluna, como mostrado aqui, defina a soma para 100%. Não encare a declaração de largura do colgroup como um resultado final que deve ser aplicado em qualquer circunstância. O layout automático funciona juntamente com o tamanho mínimo do conteúdo e os cálculos da tabela. Por favor, consulte a descrição do colgroup na MDN.

Compare o layout automático com o fixo

O layout de tabela fixa requer uma largura de tabela especificada; width: auto não produz o cálculo fixo desejado. Aqui, ambas as tabelas usam width: 100% e o mesmo grupo de colunas, diferenciando-se apenas em table-layout. Se uma célula cortar o texto, verifique separadamente suas condições de quebra e reticências. Consulte MDN: layout de tabela, CSS Overflow, Quebra de Texto Longo e Reticências.

Os dados abaixo contêm códigos de reserva longos que queremos exibir sem quebras de linha. O exemplo completo aplica nowrap·hidden·ellipsis a esta célula de forma idêntica em ambas as tabelas. O layout automático pode ser expandido para refletir o espaço de valores longos, e o layout fixo pode ser encurtado dentro de uma determinada coluna. O texto original é fornecido em sua totalidade em um parágrafo separado, assim você também pode verificar o código truncado.

Role a região da tabela em telas estreitas

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

Se o tamanho da fonte raiz for 16px, então 32rem é 512px. Se a largura disponível na tela for menor que isso, a tabela manterá sua largura mínima e apenas a área pai rolará horizontalmente. Isso deve ser distinguido de deslizar a página inteira horizontalmente. Os 32rem no exercício são apenas para fins de comparação para essas duas colunas e não se destinam a ser uma largura mínima para todas as tabelas. Verifique se a tela pequena está cortada e se pode ser manipulada de acordo com os itens Verificar CSS responsivo com largura, zoom e teclado.

Se sua tabela for pequena e ainda legível, você pode diminuir ou remover a largura mínima. Por outro lado, comprimir várias colunas e valores longos pode torná-los difíceis de ler. Determine a partir dos dados reais se as colunas semânticas podem ser encurtadas, resolvidas por quebras de linha ou se é necessário movimento horizontal. Em dispositivos móveis, instruções como “Você pode se mover horizontalmente” podem ser úteis.

O contêiner rolável possui tabindex="0", role="region", um nome acessível descritivo e um contorno visível ao receber foco. pressione Tab para acessá-lo e use as teclas de seta para chegar à última coluna. Uma tabela que não precisa de rolagem não necessita automaticamente de uma parada extra de Tab. Veja MDN: overflow.

Execute a comparação completa da tabela

Salve e abra o código abaixo como UTF-8 em tables.html. Ele usa as mesmas três linhas e a mesma proporção de colunas 30:70, para que você possa comparar as diferenças entre os layouts. O código de reserva é um dado fictício para prática de layout.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table sizes and long content</title>
  <style>
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
    .table-scroll:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    table { width: 100%; min-width: 32rem; border-collapse: collapse; }
    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
    .auto { table-layout: auto; }
    .fixed { table-layout: fixed; }
    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .original { max-width: 640px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Automatic and fixed table layout</h1>
  <h2>table-layout: auto</h2>
  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <h2>table-layout: fixed</h2>
  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>

1. Reduza a janela e verifique a largura de ambas as tabelas. As tabelas fixas têm pelo menos 512px com uma raiz de 16px, e as tabelas automáticas podem ser mais largas que isso para refletir um código mais longo. Ambas as tabelas devem se mover horizontalmente na área em que estão contidas, não através da página.
2. Mova-se para a área da tabela fixa com Tab e verifique a última coluna com a tecla de seta para a direita. Em telas pequenas, também verifique se você pode mover horizontalmente com o dedo. Ao terminar, volte a rolagem para a extremidade esquerda.
3. Altere table-layout em .fixed para auto. Após verificar como a largura das colunas e da tabela muda nos mesmos dados, restaure para fixed.
4. Altere o white-space de .token para normal e adicione overflow-wrap: anywhere. Verifique se o código longo quebra para aumentar a altura da célula, e depois volte à declaração original.
5. Altere a proporção das colunas para 40:60. Compare o espaçamento na coluna de entrada curta com as quebras de linha na coluna de descrição. Restaure para 30:70 e verifique em uma tela ampla e com o texto ampliado.

Se as proporções não parecerem como esperado, verifique o layout da tabela e a largura especificada da tabela, a largura mínima e as condições de quebra para strings longas. Se o movimento horizontal não funcionar, certifique-se de especificar overflow-x no elemento que envolve a tabela, em vez de na própria tabela. Se você optar por abreviar palavras, deve ser capaz de ler o texto original importante em outro lugar.