Div com rolagem horizontal apenas

88

Eu tenho um DIV de largura fixa contendo uma tabela com muitas colunas e preciso permitir que o usuário role a tabela horizontalmente dentro do DIV.

Isso precisa funcionar apenas no IE6 e no IE7 (aplicativo cliente interno).

O seguinte funciona no IE7:

overflow-x: scroll;

Alguém pode ajudar com uma solução que funcione no IE6 também?

html css Richard Ev
fonte
A propriedade overflow-x deve funcionar bem no IE6; você pode ter fatores complicadores. Você pode postar um caso de teste que exiba o problema?
Ben Blank
Parece que meu problema está em outro lugar - meu DIV que contém está transbordando para seu contêiner.
Richard Ev

Respostas:

189

A solução é bastante simples. Para garantir que não afetemos a largura das células na tabela, desativaremos o espaço em branco . Para garantir que obteremos uma barra de rolagem horizontal, ativaremos o overflow-x . E é basicamente isso:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

Você pode ver o resultado final aqui ou na animação abaixo. Se a tabela determinar a altura do seu contêiner, você não precisará definir explicitamente overflow-ycomo hidden. Mas entenda que isso também é uma opção.

insira a descrição da imagem aqui

Sampson
fonte
3
Eu estava sentindo falta do white-space: nowrap;. Funciona como um encanto!
AndreFeijo
4
Se uma imagem vale mais que mil palavras, um gif vale um milhão.
HoldOffHunger
Você é o campeão, meu amigo.
Spencer Williams de
E se eu precisar de uma rolagem vertical individual também em cada coluna e nenhuma rolagem vertical no contêiner principal? Estou tentando fazer isso white-space: nowrap;no contêiner principal e na configuração heighte overflow-y: scrollem colunas individuais, mas não está funcionando.
Sachin
espaço em branco: nowrap; Eu sempre caio nisso! obrigado resposta incrível!
talsibony
68

Não consegui fazer a resposta selecionada funcionar, mas depois de um pouco de pesquisa , descobri que a div de rolagem horizontal deve ter white-space: nowrapno css.

Aqui está o código de trabalho completo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>
WKS
fonte
2
A sugestão de "espaço em branco: nowrap" aqui parece ter sido combinada com a resposta correta. 1 para melhorar a resposta aceita.
HoldOffHunger
21 
overflow-x: scroll;
overflow-y: hidden;

EDITAR:

Funciona para mim:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>
Diodeus - James MacFarlane
fonte
17

Para rolagem horizontal, mantenha estas duas propriedades em mente:

overflow-x:scroll;
white-space: nowrap;

Veja o link de trabalho: clique em mim

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
ankitd
fonte
3

tente isto:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

O espaço em branco: nowrap; propriedade não permite quebrar o texto. Veja aqui um exemplo: https://codepen.io/oezkany/pen/YoVgYK

Oezkany
fonte