Как иметь только вертикальную полосу прокрутки на div

У меня есть таблица, которая находится в div. Длина таблицы может меняться, и я использую div для обеспечения высоты.

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

Моя проблема в том, когда нужна вертикальная полоса прокрутки, занимаемое ею пространство вызывает появление горизонтальной полосы прокрутки. Мне не нужна горизонтальная полоса прокрутки, и я попытался использовать свойство overflow-y: hidden; css, чтобы скрыть ее, но это заставляет обе полосы прокрутки скрываться.

Кто-нибудь знает, почему overflow-y:hidden; работает не так, как ожидалось, или как остановить горизонтальную полосу прокрутки от видимости?

Ответы

Ответ 1

Вы скрываете вертикальную полосу прокрутки, а не горизонтальную.

Измените overflow-y: hidden; на overflow-x: hidden;

---

Вот демон

Я добавил контент, превосходящий высоту, и div с шириной больше 340 пикселей внутри #CamListDiv. Содержимое прокручивается только вертикально.

Ответ 2

Кстати, свойство overflow-y не работает должным образом в IE8 и ранее. http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Попробуйте установить стиль = "width: 100%;" к таблице внутри div, которая должна скрывать горизонтальную полосу, потому что она не будет больше, чем контейнер.

Ответ 3

Вы можете использовать Overflow-y, который входит в css2, см. здесь