Como fazer - Tabelas responsivas
Saiba como criar uma tabela responsiva.
Tabelas responsivas
Uma tabela responsiva exibirá uma barra de rolagem horizontal se a tela for muito pequena para exibir o conteúdo completo. Redimensione a janela do navegador para ver o efeito:
Primeiro nome | Último nome | 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 |
véspera | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adão | 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 um elemento container ao overflow-x:auto
redor da <table>:
Exemplo
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Nota: No OS X Lion (no Mac), as barras de rolagem ficam ocultas por padrão e são exibidas apenas quando usadas (mesmo que "overflow:scroll" ou auto esteja definido).
Dica: Acesse nosso Tutorial de tabelas CSS para saber mais sobre como estilizar tabelas.