Élément CSS div - comment afficher uniquement les barres de défilement horizontales?

J'ai un conteneur div et j'ai défini son style comme suit:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

Cela me donne automatiquement des barres de défilement horizontales et verticales une fois que je remplis ma table qui est contenue par cette div. Je veux juste que seules les barres de défilement horizontales apparaissent automatiquement. Je modifierai la hauteur de la table par programme.

Comment puis-je faire cela?

Vous ne devriez pas avoir de barres de défilement horizontales et verticales à moins que vous ne rendiez le contenu suffisamment volumineux pour en avoir besoin.

Cependant, vous le faites généralement dans IE en raison d'un bogue. Vérifiez dans d'autres navigateurs (Firefox, etc.) pour savoir si ce n'est en fait que IE qui le fait.

IE6-7 (parmi d'autres navigateurs) prend en charge l'extension CSS3 proposée pour définir les barres de défilement indépendamment, que vous pouvez utiliser pour supprimer la barre de défilement verticale:

overflow: auto;
overflow-y: hidden;

Vous devrez peut-être également ajouter pour IE8:

-ms-overflow-y: hidden;

car Microsoft menace de déplacer toutes les propriétés pré-CR-standard dans leur propre boîte «-ms» en mode standard IE8. (Cela aurait été logique s'ils l'avaient toujours fait de cette façon, mais c'est plutôt un inconvénient pour tout le monde maintenant.)

D'un autre côté, il est tout à fait possible qu'IE8 ait corrigé le bogue de toute façon.

J'ai également dû ajouter white-space: nowrap;au style, sinon les éléments se termineraient dans la zone vers laquelle nous supprimons la possibilité de faire défiler.

Cette solution est sans spécification de hauteur / largeur pour le div père , elle sera donc sensible au redimensionnement de la fenêtre et la barre de défilement horizontale la plus utile car juste si nécessaire.

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

Jetez un oeil à DEMO

Pour montrer les deux:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

Masquer l'axe X:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

Masquer l'axe Y:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

vous pouvez également le faire overflow: autoet donner une hauteur et une largeur maximales fixes de cette façon, lorsque le texte ou tout ce qui s'y trouve déborde, il n'affichera que la barre de défilement requise

J'utilise les propriétés CSS: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) " white-space: nowrap";

N'oubliez pas de définir une largeur, à la fois pour le conteneur et les composants DIVS internes. La propriété "white-space: nowrap" permet au DIVS interne de ne pas tomber sur une ligne différente.

Compte tenu du code HTML suivant:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

J'utilise le CSS suivant pour avoir un défilement horizontal uniquement:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

Violon: https://jsfiddle.net/qrjh93x8/ (ne fonctionne pas avec le code ci-dessus)

Utilisez le suivant

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

CSS3 a la overflow-xpropriété, mais je ne m'attendrais pas à un grand soutien pour cela. Dans CSS2, tout ce que vous pouvez faire est de définir une scrollpolitique générale et de travailler votre widthset de heightsne pas les gâcher.

Nous devons définir overflow: autoet masquer une barre de défilement que nous n'utilisons pas pour travailler sur le navigateur CSS3 non compatible. Regardez ce débordement CSS; XME.im