Barra de rolagem vertical em tabela/div
E aí, galera...
eu estou fazendo uma página onde listo alguns dados em tabela, só que são várias colunas, então eu queria poder colocar uma barra de rolagem vertical para o usuário poder visualizar as colunas que ficam fora da largura padrão.
A área onde fica a tabela tem 640px, mas a tabela pode ficar maior por serem várias colunas.
Alguém já fez algo assim?
Grato.
Saulo Cardoso
Curtidas 1
Melhor post
Marlon Oliveira
10/01/2013
coloque a table dentro de uma div
<div style="overflow: auto; width: 640px">
table aqui
</div>
GOSTEI 2
Mais Respostas
Saulo Cardoso
09/01/2013
Opa, obrigado pela resposta.
No caso então eu posso colocar qualquer largura para a tabela? Esse overflow "auto", como funciona exatamente?
É bom perguntar para da próxima vez eu já saber como usar.
Grato.
GOSTEI 0
Marlon Oliveira
09/01/2013
sim...
a tabela pode ter qualquer tamanho.
e a propriedade overflow auto, significa dizer que se por acaso o conteudo da div ultrapassar a largura de 640px, ela vai gerar uma barra de rolagem. isso vale também para a altura.
GOSTEI 0
Saulo Cardoso
09/01/2013
Poxa, cara, valeu mesmo. Usei sua dica e deu certo. Veja só meu código de testes:
Agora me surgiu uma curiosidade. E se eu precisasse do scroll só vertical pra deixar o cabeçalho da tabela fixo, daria pra fazer?
Tipo rolar só as linhas da tabela e deixar os títulos da coluna.
Se não der, tudo bem, já me ajudou bastante mesmo.
Obrigado.
<div style="overflow: auto; width: 640px; height: 200px; border:solid 1px">
<table class="tabela" style="width:800px">
<thead>
<tr>
<th>ID</th>
<th>Nome do Cliente</th>
<th>Email</th>
<th>Telefone(s)</th>
<th>Endereço</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Marcio Castro</td>
<td>marciocastro@email.com</td>
<td>(21) 1234-56789</td>
<td>Endereço do cliente 1</td>
</tr>
<tr>
<td>2</td>
<td>João da Silva</td>
<td>joao@mail.com</td>
<td>(83) 9876-5432</td>
<td>Endereço do cliente 2</td>
</tr>
<tr>
<td>3</td>
<td>Pedro Pereira</td>
<td>pedro@seuemail.com</td>
<td>(85) 3221-3221</td>
<td>Endereço do cliente 3</td>
</tr>
<tr>
<td>1</td>
<td>Marcio Castro</td>
<td>marciocastro@email.com</td>
<td>(21) 1234-56789</td>
<td>Endereço do cliente 1</td>
</tr>
<tr>
<td>2</td>
<td>João da Silva</td>
<td>joao@mail.com</td>
<td>(83) 9876-5432</td>
<td>Endereço do cliente 2</td>
</tr>
<tr>
<td>3</td>
<td>Pedro Pereira</td>
<td>pedro@seuemail.com</td>
<td>(85) 3221-3221</td>
<td>Endereço do cliente 3</td>
</tr>
<tr>
<td>1</td>
<td>Marcio Castro</td>
<td>marciocastro@email.com</td>
<td>(21) 1234-56789</td>
<td>Endereço do cliente 1</td>
</tr>
<tr>
<td>2</td>
<td>João da Silva</td>
<td>joao@mail.com</td>
<td>(83) 9876-5432</td>
<td>Endereço do cliente 2</td>
</tr>
<tr>
<td>3</td>
<td>Pedro Pereira</td>
<td>pedro@seuemail.com</td>
<td>(85) 3221-3221</td>
<td>Endereço do cliente 3</td>
</tr>
</tbody>
</table>
</div>
GOSTEI 0
Joel Rodrigues
09/01/2013
Opa, Marcio. Beleza?
Nesse caso você teria que colocar o cabeçalho fixo usando outros elementos como div e span e definir suas larguras de acordo com as larguras das colunas.
Então você colocaria a tabela sem o thead como você já fez.
Boa sorte.
GOSTEI 0
Joel Rodrigues
09/01/2013
Ah, suspeitei.
Obrigado então.
Podem fechar o tópico, por favor.
GOSTEI 0
Joel Rodrigues
09/01/2013
[quote="marlonmeneses"]coloque a table dentro de uma div
<div style="overflow: auto; width: 640px">
table aqui
</div>
Você ainda pode especificar qual barra de rolagem deseja, a da direita ou a a de baixo, com overflow-x e overflow-y
GOSTEI 1
Joel Rodrigues
09/01/2013
Opa, mais uma informação muito útil.
Obrigado, dicarte.
GOSTEI 0
Joel Rodrigues
09/01/2013
[quote="marciocastro"]Opa, mais uma informação muito útil.
Obrigado, dicarte.
de nada ....
:mrgreen:
GOSTEI 0
Eduardo Pereira
09/01/2013
Deus abençõe o overflow :)
GOSTEI 0