Tabela responsiva CSS
Tabela responsiva
Uma tabela responsiva exibirá uma barra de rolagem horizontal se a tela for muito pequena para exibir o conteúdo completo:
Primeiro nome | Último nome | 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 |
véspera | Jackson | 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 |
Adicione um elemento de contêiner (como <div>) ao overflow-x:auto
redor do elemento <table> para torná-lo responsivo:
Exemplo
<div style="overflow-x:auto;">
<table>
... table content ...
</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" esteja definido).
Mais exemplos
Este exemplo demonstra como criar uma tabela sofisticada.
Este exemplo demonstra como posicionar a legenda da tabela.
Propriedades da tabela CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |