F�rum Barra de rolagem vertical em tabela/div #565457

09/01/2013

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

Curtir t�pico

+ 1

Responder

Post mais votado

10/01/2013

coloque a table dentro de uma div <div style="overflow: auto; width: 640px"> table aqui </div>

Marlon Oliveira

Responder

Gostei + 2

Mais Posts

10/01/2013

Saulo Cardoso

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.

Responder

Gostei + 0

10/01/2013

Marlon Oliveira

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.

Responder

Gostei + 0

11/01/2013

Saulo Cardoso

Poxa, cara, valeu mesmo. Usei sua dica e deu certo. Veja s� meu c�digo de testes:

    <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>

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.

Responder

Gostei + 0

15/01/2013

Joel Rodrigues

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.

Responder

Gostei + 0

15/01/2013

Joel Rodrigues

Ah, suspeitei. Obrigado ent�o. Podem fechar o t�pico, por favor.

Responder

Gostei + 0

15/01/2013

Joel Rodrigues

[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

Responder

Gostei + 1

17/01/2013

Joel Rodrigues

Opa, mais uma informa��o muito �til. Obrigado, dicarte.

Responder

Gostei + 0

17/01/2013

Joel Rodrigues

[quote="marciocastro"]Opa, mais uma informa��o muito �til. Obrigado, dicarte.

de nada .... :mrgreen:

Responder

Gostei + 0