Div avec défilement horizontal uniquement

88

J'ai un DIV de largeur fixe contenant une table avec de nombreuses colonnes et je dois permettre à l'utilisateur de faire défiler le tableau horizontalement dans le DIV.

Cela doit fonctionner uniquement sur IE6 et IE7 (application client interne).

Les travaux suivants dans IE7:

overflow-x: scroll;

Quelqu'un peut-il vous aider avec une solution qui fonctionne également dans IE6?

html css Richard Ev
la source
La propriété overflow-x devrait fonctionner correctement dans IE6; vous pouvez avoir des facteurs de complication. Pouvez-vous publier un cas de test qui présente le problème?
Ben Blank
Il semble que mon problème soit ailleurs - mon DIV contenant déborde dans son conteneur.
Richard Ev

Réponses:

189

La solution est assez simple. Pour nous assurer que nous n'affectons pas la largeur des cellules du tableau, nous désactiverons les espaces blancs . Pour nous assurer d'avoir une barre de défilement horizontale, nous allons activer overflow-x . Et c'est à peu près tout:

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

Vous pouvez voir le résultat final ici , ou dans l'animation ci-dessous. Si la table détermine la hauteur de votre conteneur, vous ne devriez pas avoir besoin de définir explicitement overflow-ysur hidden. Mais comprenez que c'est aussi une option.

entrez la description de l'image ici

Sampson
la source
3
Je manquais le white-space: nowrap;. Fonctionne comme un charme!
AndreFeijo
4
Si une image vaut mille mots, un gif vaut un million.
HoldOffHunger
Tu es le champion, mon ami.
Spencer Williams
Et si j'ai également besoin d'un défilement vertical individuel sur chaque colonne et pas de défilement vertical sur le conteneur principal? J'essaie de faire cela avec white-space: nowrap;le conteneur principal et le réglage heightet overflow-y: scrollles colonnes individuelles, mais cela ne fonctionne pas.
Sachin
espace blanc: nowrap; Je tombe toujours dedans! merci réponse géniale!
talsibony
68

Je n'ai pas pu faire fonctionner la réponse sélectionnée, mais après quelques recherches , j'ai trouvé que le div de défilement horizontal doit avoir white-space: nowrapdans le css.

Voici le code de travail complet:

<!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
la source
2
La suggestion de "white-space: nowrap" ici semble avoir été mélangée dans la bonne réponse. +1 pour l'amélioration de la réponse acceptée.
HoldOffHunger
21 
overflow-x: scroll;
overflow-y: hidden;

ÉDITER:

Ça marche pour moi:

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

Pour le défilement horizontal, gardez ces deux propriétés à l'esprit:

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

Voir le lien de travail: cliquez sur moi

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
la source
3

essaye ça:

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

L'espace blanc: nowrap; propriété ne vous laisse pas envelopper le texte. Voir juste ici pour un exemple: https://codepen.io/oezkany/pen/YoVgYK

oezkany
la source