Renderização mais rápida das Tabelas com CSS
Postado por: Pedro Rogério emCaso você tenha que utilizar tabelas em seu site, quando se trata realmente de uma tabela, é conveniente ter em conta que existe uma propriedade no CSS não muito utilizada que pode melhorar e muito a renderização de nossas tabelas.
A propriedade se chama table-layout e nos permite indicar se queremos que a tabela tenha o seu fluxo com o tamanho fixo ou o seu tamanho acompanhe o fluxo do conteúdo:
.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}
O valor fixed nos permite renderizar a tabela de uma forma mais rápida, já que o tamanho das celulas depende das colunas, e não do conteúdo, por isso a renderização é mais rápida. Ótimo para se utilizar em tabelas muito grandes e que possuem conteúdo muito parecido. Já o valor auto é dependente dos valores das células, por isso é necessário ler toda a tabela, se recomenda utilizar quando a tabela tem conteúdo muito variado.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Boa! Desta não sabia.
Interessante. Nunca lembrava dessa propriedade. |Muito bom.
Essa vai pro meu caderninho de anotações!!!
E qual a diferença de setar essa propriedade “auto” e deixar a tabela sem width, height, ajustando sozinha de acordo com o conteúdo?
@Eliseu,
O próprio “auto” já explica, se você deixar sem altura e largura definida, as dimensões seriam definidas de acordo com o conteúdo!!!
Oi Pedro, nononono, voce não entendeu, digo que, a tabela sem as propriedades width e height, ela se auto-ajusta de acordo com o conteúdo, então porquê usaria um estilo que não faria a diferença? Gostaria de saber se tenho alguma vantagem relacionado a essa classe.
Boa dica, não sabia disto. é aconselhável utilizar sempre essas prioridades em todas as tabelas?
Boa…