Come avere solo una barra di scorrimento verticale su un div

Question

Ho una tabella che è in un div. La lunghezza del tavolo può variare e io uso il div per forzare un'altezza.

<div id='CamListDiv'> 
<table> 
    <thead> 
     <th><input type='checkbox' id='selectAll'/></th> 
     <th>Local Camera List</th> 
    </thead> 
    <tbody> 
     <tr><td>//camera 1 data //</td></tr> 
     <tr><td>...</td></tr> 
     <tr><td>//camera x data //</td></tr> 
    </tbody> 
</table> 
</div> 

CSS 
#CamListDiv { 
    height: 340px; 
    float: left; 
    overflow: auto; 
    overflow-y: hidden; 
} 

Il mio problema è quando è necessaria la barra di scorrimento verticale, lo spazio che occupa fa apparire una barra di scorrimento orizzontale. Non ho bisogno della barra di scorrimento orizzontale e ho cercato di usare la proprietà css overflow-y: hidden; per nasconderlo ma questo fa sì che entrambe le barre di scorrimento siano nascoste.

Qualcuno sa perché overflow-y:hidden; non funziona come previsto o come impedire che la barra di scorrimento orizzontale sia visibile?

Answer 1

Si nasconde la barra di scorrimento verticale e non quella orizzontale.

Change overflow-y: hidden; al overflow-x: hidden;

---

Heres un contenuto quick demo

Ho aggiunto superando l'altezza, e un div con una larghezza superiore a 340px all'interno #CamListDiv. Il contenuto è scorrevole solo verticalmente.

Answer 2

È possibile utilizzare overflow-y che viene in CSS2, vedere here

Answer 3

Tra l'altro la proprietà overflow-y non funziona correttamente in IE8 e precedenti. http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Provare a impostare uno stile = "larghezza: 100%;" al tavolo all'interno del div, che dovrebbe nascondere la barra orizzontale perché non sarà più grande del suo contenitore.