Como criar: Tabela responsiva

Aprenda a criar tabelas responsivas.

Tabela responsiva

Se a tela for太小， não for possível exibir todo o conteúdo, a tabela responsiva exibirá uma barra de rolagem horizontal.

Ajuste o tamanho da janela do navegador para ver os efeitos:

Nome Sobrenome Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

Para criar uma tabela responsiva, adicione ao redor de <table> um contêiner que contenha overflow-x:auto do elemento de contêiner:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Experimente pessoalmente

Atenção:No OS X Lion (no Mac) o barramento padrão está oculto, apenas ao usar é exibido (mesmo que configurado "overflow:scroll" ou auto).

Páginas relacionadas

Tutorial:Tabela CSS