Disposição da mesa - CSS-Tricks

A table-layoutpropriedade define qual algoritmo o navegador deve usar para organizar as linhas, células e colunas da tabela.

table ( table-layout: fixed; )

Conforme explicado na especificação CSS2.1, o layout da tabela em geral é geralmente uma questão de gosto e irá variar dependendo das opções de design. Os navegadores, no entanto, aplicarão automaticamente certas restrições que definirão como as tabelas são dispostas. Isso acontece quando a table-layoutpropriedade é definida como auto(o padrão). Mas essas restrições podem ser removidas quando table-layoutdefinido como fixed.

Valores

auto: o padrão. O algoritmo automático do navegador é usado para definir como as linhas, células e colunas de uma tabela são dispostas. O layout da tabela resultante geralmente depende do conteúdo da tabela.
fixed: Com este valor, o layout da tabela ignora o conteúdo e, em vez disso, usa a largura da tabela, qualquer largura especificada de colunas e valores de espaçamento de borda e célula. Os valores da coluna usados são baseados nas larguras definidas nas colunas ou células da primeira linha da tabela.
inherit: indica que o valor é herdado do table-layoutvalor de seu pai

Para que um valor de fixedtenha algum efeito, a largura da tabela deve ser definida como algo diferente de auto(o padrão para a widthpropriedade). Nas demos abaixo, todas as larguras da tabela são definidas como 100%, o que pressupõe que queremos que a tabela preencha seu contêiner pai horizontalmente.

A melhor maneira de ver os efeitos de um algoritmo de layout de tabela fixo é usando uma demonstração.

Veja o Pen Demo para propriedade de layout de tabela CSS por Louis Lazaris (@impressivewebs) em CodePen.

Ao ver a demonstração acima pela primeira vez, você notará que o layout das colunas da tabela é desequilibrado e estranho. Nesse ponto, a tabela está usando o algoritmo padrão do navegador para definir como dispor a tabela, o que significa que o conteúdo ditará o layout. A demonstração exagera esse fato ao incluir uma longa sequência de texto dentro de uma célula da tabela, enquanto todas as outras células da tabela usam apenas duas palavras cada. Como você pode ver, o navegador expande a primeira coluna para acomodar a parte maior do conteúdo.

Se você clicar no botão “Alternar layout da tabela: fixo”, verá como fica o layout da mesa quando o algoritmo “fixo” é usado. Quando table-layout: fixedé aplicado, o conteúdo não dita mais o layout, mas em vez disso, o navegador usa qualquer largura definida da primeira linha da tabela para definir as larguras das colunas. Se nenhuma largura estiver presente na primeira linha, as larguras das colunas serão divididas igualmente na tabela, independentemente do conteúdo dentro das células.

Outros exemplos podem ajudar a tornar isso mais claro. Na demonstração a seguir, a tabela possui um elemento cujo primeiro elemento possui uma largura de 400px. Observe que, neste caso, alternar table-layout: fixednão tem efeito.

Veja o Pen Demo para propriedade de layout de tabela CSS por Louis Lazaris (@impressivewebs) em CodePen.

Isso acontece porque o algoritmo de layout padrão está essencialmente dizendo “faça a primeira coluna com 400 px de largura e distribua as colunas restantes com base em seu conteúdo”. Como as outras três colunas têm o mesmo conteúdo, não haverá alteração. Mas agora vamos adicionar algum conteúdo de texto extra a uma das outras colunas:

Veja a demonstração da caneta para a propriedade de layout de tabela CSS com largura de coluna e conteúdo variável de Louis Lazaris (@impressivewebs) em CodePen.

Agora, se você clicar no botão de alternância, verá as colunas ajustadas para acomodar um layout fixo, independentemente do conteúdo. Mais uma vez, a mesma coisa está acontecendo; a primeira coluna é definida em 400px, em seguida, as colunas restantes são divididas igualmente. Mas desta vez, como uma das colunas possui conteúdo extra, a diferença é perceptível.

Como um algoritmo de layout fixo determina as larguras das colunas

As duas demos a seguir devem ajudar a entender que a primeira linha da tabela é o que ajuda a definir as larguras das colunas de uma tabela definida como table-layout: fixed.

Veja o Pen Demo para o layout de tabela CSS com a célula na linha 1 dada a largura definida por Louis Lazaris (@impressivewebs) no CodePen.

Na demonstração acima, a primeira célula na primeira linha da tabela tem uma largura de 350 px. Alternar table-layout: fixedajusta as outras colunas, mas a primeira permanece a mesma. Agora tente a seguinte demonstração:

Veja o Pen Demo para o layout de tabela CSS com a célula na linha 2 dada a largura definida por Louis Lazaris (@impressivewebs) no CodePen.

Nesse caso, é a segunda linha que possui uma largura anexada à sua primeira célula da tabela. Agora, quando o botão de alternância é clicado, todas as larguras das colunas são ajustadas. Novamente, isso ocorre porque o algoritmo de layout fixo está usando a primeira linha para determinar as larguras das colunas e o resultado final é que ele distribui as larguras igualmente.

Benefícios de um algoritmo de layout fixo

Os benefícios estéticos do uso table-layout: fixeddevem ser claros nas demonstrações acima. Mas o outro grande benefício é o desempenho. A especificação se refere ao algoritmo fixo como um algoritmo “rápido” e por um bom motivo. O navegador não precisa analisar todo o conteúdo da tabela antes de determinar o tamanho das colunas; ele só precisa analisar a primeira linha. Portanto, o resultado é um processamento mais rápido do layout da tabela.