Elemento div CSS: come mostrare solo le barre di scorrimento orizzontali?

Ho un contenitore div e ho definito il suo stile come segue:

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

Questo mi dà automaticamente barre di scorrimento orizzontale e verticale una volta popolato il mio tavolo che è contenuto da questo div. Voglio solo che vengano visualizzate automaticamente solo le barre di scorrimento orizzontali. Modificherò l'altezza della tabella a livello di codice.

Come faccio a fare questo?

Non dovresti ottenere barre di scorrimento sia orizzontali che verticali a meno che non rendi il contenuto abbastanza grande da richiederli.

Tuttavia, in genere lo fai in IE a causa di un bug. Controlla in altri browser (Firefox ecc.) Per scoprire se è effettivamente solo IE a farlo.

IE6-7 (tra gli altri browser) supporta l'estensione CSS3 proposta per impostare le barre di scorrimento in modo indipendente, che è possibile utilizzare per sopprimere la barra di scorrimento verticale:

overflow: auto;
overflow-y: hidden;

Potrebbe anche essere necessario aggiungere per IE8:

-ms-overflow-y: hidden;

poiché Microsoft sta minacciando di spostare tutte le proprietà pre-CR nella propria casella '-ms' in modalità standard IE8. (Ciò avrebbe avuto senso se lo avessero sempre fatto in quel modo, ma ora è piuttosto un inconveniente per tutti.)

D'altra parte è del tutto possibile che IE8 abbia risolto il bug comunque.

Ho anche dovuto aggiungere white-space: nowrap;allo stile, altrimenti gli elementi verrebbero spostati nell'area in cui stiamo rimuovendo la possibilità di scorrere.

Questa soluzione non ha specifiche di altezza / larghezza per il div padre, quindi risponderà al ridimensionamento della finestra e la più utile causa barre di scorrimento orizzontali appare solo se necessario.

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

Dai un'occhiata a DEMO

Per mostrare entrambi:

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

Nascondi asse X:

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

Nascondi asse Y:

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

puoi anche farlo overflow: autoe dare un'altezza e una larghezza fisse massime in quel modo, quando il testo o qualunque cosa sia lì dentro trabocca mostrerà solo la barra di scorrimento richiesta

Uso le proprietà CSS: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) "white-space: nowrap ";

Non dimenticare di impostare una larghezza, sia per il contenitore che per i componenti DIVS interni. La proprietà "white-space: nowrap" consente ai DIVS interni di non cadere su una linea diversa.

Considerando il seguente HTML:

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

Uso il seguente CSS per avere solo uno scorrimento orizzontale:

.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/ (non funzionante con il codice sopra)

Utilizza il seguente

<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 ha la overflow-xproprietà, ma non mi aspetto un grande supporto per questo. In CSS2 tutto ciò che puoi fare è impostare una scrollpolitica generale e lavorare sulla tua widthse heightsnon rovinarla.

Dovremmo impostare overflow: autoe nascondere una barra di scorrimento che non utilizziamo per lavorare su browser CSS3 non supportati. Guarda questo CSS Overflow; XME.im