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

Question

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

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

Cela me donne une fois à la fois des barres de défilement horizontal et vertical automatiquement ma table je POPULATE qui est contenue par cette div. Je veux juste que les barres de défilement horizontales apparaissent automatiquement. Je vais modifier la hauteur de la table par programme.

Comment faire?

Answer 1

Vous ne devriez pas obtenir à la fois des barres de défilement horizontal et vertical, sauf si vous faites le contenu assez grand pour les obliger.

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

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

overflow: auto; 
overflow-y: hidden; 

Vous devrez peut-être ajouter pour IE8:

-ms-overflow-y: hidden; 

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

D'autre part, il est tout à fait possible qu'IE8 ait corrigé le bug de toute façon.

Answer 2

CSS3 possède la propriété overflow-x, mais je ne m'attendais pas à un support important pour cela. Dans CSS2 tout ce que vous pouvez faire est de définir une politique générale scroll et travailler votre widths et heights de ne pas les gâcher.

Answer 3

vous pouvez également faire overflow: auto et donner une hauteur fixe et la largeur maximale de cette façon, lorsque le texte ou tout ce qui est là-dedans, il déborde montrera que la barre de défilement nécessaire

Answer 4

Pour montrer à la fois:

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

Cacher X Axe:

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

Cacher Axe Y:

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

Answer 5

Je devais aussi ajouter white-space: nowrap; au style, sinon des éléments envelopperait vers le bas dans la zone que nous supprimons la possibilité de faire défiler jusqu'à.

Answer 6

Nous devrions mettre à overflow: auto et cacher une barre de défilement que nous ne l'utilisons pas pour travailler sur le navigateur CSS3 ne les supportant pas. Regardez ce CSS Overflow; XME.im

Answer 7

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

Answer 8

Utilisez les éléments suivants

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

Answer 9

Cette solution est sans hauteur/spécification largeur du père div il sera réactif pour le redimensionnement de la fenêtre et la cause la plus utile barres de défilement horizontales apparaît 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

Answer 10

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 aux DIVS internes de ne pas tomber sur une ligne différente.

Vu le code HTML suivant:

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

-je utiliser le CSS suivant pour avoir un défilement horizontal seulement:

.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 */ 
} 

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