Propriedade CSS table-layout

A propriedade CSS table-layout define o algoritmo que o navegador usa para calcular as larguras das células, linhas e colunas de uma tabela. Ela possui dois algoritmos possíveis — auto e fixed — e a escolha entre eles altera tanto a forma como a tabela é dimensionada quanto a velocidade com que é renderizada.

Esta página explica como cada algoritmo funciona, quando usar fixed e os problemas (como transbordamento de texto) que podem surgir com ele.

Como os dois algoritmos funcionam

auto (o padrão) deixa o conteúdo decidir as larguras das colunas. O navegador precisa ler cada célula em cada linha antes de calcular o layout, ampliando cada coluna para caber o trecho de conteúdo mais longo. Isso produz uma tabela de aparência natural, mas também significa que a tabela pode se deslocar à medida que mais conteúdo chega, e palavras muito longas podem esticar uma coluna além do pretendido.

fixed ignora o conteúdo da maioria das células e dimensiona as colunas com base na width da própria tabela, nas larguras explícitas de colunas (nas células da primeira linha ou em elementos <col>), além de bordas e espaçamento de células. Como o layout não depende mais de cada célula, o navegador pode renderizar a tabela em uma única passagem.

Existem dois motivos práticos para escolher fixed:

Desempenho. Com auto, uma tabela grande não pode ser exibida até que toda a tabela tenha sido analisada e medida. fixed renderiza linha por linha à medida que o conteúdo chega, então uma tabela longa aparece mais rápido e a página parece carregar mais depressa.
Previsibilidade. As larguras das colunas permanecem exatamente onde você as definiu e não se movem quando o conteúdo das células muda — útil para tabelas de dados com estrutura conhecida.

A contrapartida: com fixed, o conteúdo mais largo do que sua coluna não alarga a coluna. Por padrão, ele transborda a célula. Normalmente, combina-se fixed com word-wrap / overflow-wrap, text-overflow ou overflow para controlar o que acontece com o conteúdo que ultrapassa o limite.

Valor Inicial	auto
Aplica-se a	Elementos table e inline-table.
Herdado	Não.
Animável	Não.
Versão	CSS2
Sintaxe DOM	object.style.tableLayout = "fixed";

Sintaxe

Sintaxe CSS de table-layout

table-layout: auto | fixed | initial | inherit;

Exemplos

Exemplo da propriedade table-layout com o valor "fixed":

Exemplo de código CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 40%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade table-layout com os valores "auto" e "fixed":

Exemplo de valores CSS de table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 250px;
      }
      table.t2 {
        table-layout: auto;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 250px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Com table-layout: fixed, a primeira tabela mantém suas três colunas iguais de 250px independentemente do tamanho dos nomes das cidades, enquanto a tabela auto se estica para acomodar "Saint Petersburg". Essa é a diferença central: fixed respeita suas larguras, auto respeita o conteúdo.

Controlando o transbordamento com table-layout: fixed

Como as colunas com fixed não crescem para acomodar conteúdo longo, uma palavra maior que a coluna escapa da célula. A solução é quebrar ou recortar o texto. O trecho abaixo mostra três abordagens comuns lado a lado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        table-layout: fixed;
        width: 300px;
        border-collapse: collapse;
      }
      td {
        border: 2px solid #666;
        width: 100px;
        padding: 4px;
      }
      .clip {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .wrap {
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Overflows by default</td>
        <td class="clip">Supercalifragilisticexpialidocious</td>
        <td class="wrap">Supercalifragilisticexpialidocious</td>
      </tr>
    </table>
  </body>
</html>

A célula do meio recorta a palavra longa com reticências (text-overflow: ellipsis), enquanto a célula da direita a quebra em múltiplas linhas (overflow-wrap: break-word).

Valores

Valor	Descrição	Experimente
auto	Usa o algoritmo de layout automático quando a tabela e suas células se ajustam ao conteúdo. Este é o valor padrão da propriedade.	Experimente »
fixed	Usa o algoritmo de layout fixo de tabela. As larguras da tabela, de `col` e da primeira linha de células definem as larguras da tabela e das colunas.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

table-layout funciona em conjunto com outras propriedades CSS que estilizam tabelas:

border-collapse — escolha entre bordas de células separadas e colapsadas.
border-spacing — defina o espaço entre células quando as bordas estão separadas.
empty-cells — exiba ou oculte bordas e fundos em células sem conteúdo.
width — defina a largura total da tabela sobre a qual o algoritmo fixed é baseado.
white-space — controle a quebra de texto dentro de células de largura fixa.

Prática

O que a propriedade CSS table-layout faz?

Permite determinar a largura de exibição das colunas na página.Permite alterar o estilo da fonte do texto na tabela.Define o algoritmo de layout a ser usado para uma tabela.Altera a cor do fundo da tabela.Define o estilo de borda da tabela.