Propriedade de layout de tabela CSS
Exemplo
Defina diferentes algoritmos de layout de tabela:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Definição e uso
A table-layout
propriedade define o algoritmo usado para organizar células, linhas e colunas da tabela.
Dica: O principal benefício do layout da mesa: fixo; é que a tabela renderiza muito mais rápido. Em tabelas grandes, os usuários não verão nenhuma parte da tabela até que o navegador tenha renderizado a tabela inteira. Portanto, se você usar table-layout: fixed, os usuários verão a parte superior da tabela enquanto o navegador carrega e renderiza o restante da tabela. Isso dá a impressão de que a página carrega muito mais rápido!
Valor padrão: | auto |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | objeto .style.tableLayout="fixo" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
Sintaxe CSS
table-layout: auto|fixed|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
auto | Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout | |
fixed | Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Páginas relacionadas
Tutorial CSS: Tabela CSS
Referência HTML DOM: propriedade tableLayout