Este é um post de José Lopes.
Quando tem uma área num ficheiro HTML com informação (tables, imagens, etc) em que pretende definir uma altura e largura específica pode se levantar a questão das barras de scroll.
Encontra muita informação sobre como as definir automaticamente, obtendo uma barra horizontal e outra vertical, e como definir somente a barra de scroll vertical, mas no entanto, pode ser difícil de encontrar como tornar somente visível a barra de scroll horizontal.
Este post mostra como fazer isso.
Basta criar no seu CSS uma instância com o seguinte código:
(1) #container { (2) width: 700px; (3) overflow:auto; (4) overflow-x:scroll; (5) overflow-y:hidden; }
Explicando o CSS:
(1) Nome da instância.
(2) Define a largura da àrea onde queremos a barra de scroll horizontal.
(3) Para funcionar com browsers mais antigos.
(4) Força a barra de scroll horizontal.
(5) Esconde a barra de scroll vertical.
É de facto simples!
Para implementar isto um ficheiro HTML basta escrever:
<div id="container"> O_SEU_CONTEÚDO_AQUI </div>
O conteúdo pode conter outras classes de CSS e todo o tipo de informação.
Para ver um exemplo prático clique aqui.
Este
exemplo tem tabelas e imagens dentro da zona com a barra de scroll horizontal.