CODEWITHSUNDEEP
javascripthtmlcss
DarylF
DarylF

Reputation: 726

How to have only a vertical scroll bar on a div

I have a table which is in a div. The length of the table can vary and I use the div to enforce a height.

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

My problem is when the vertical scrollbar is needed, the space it occupies causes a horizontal scrollbar to appear. I don't need the horizontal scrollbar and I tried to use the overflow-y: hidden; css property to hide it but this causes both scrollbars to be hidden.

Does anyone know why overflow-y:hidden; isn't working as expected or how to stop the horizontal scrollbar from being visible?

Upvotes: 12

Views: 69514

Answers (3)

Java
Java

Reputation: 2489

You can use Overflow-y which comes in css2, see here

Upvotes: -2

detay
detay

Reputation: 1072

By the way the overflow-y property does not work properly in IE8 and earlier. http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Try setting a style="width:100%;" to the table inside the div, that should hide the horizontal bar because it won't be larger than it's container.

Upvotes: 1

Curtis
Curtis

Reputation: 103368

You are hiding the vertical scrollbar, and not the horizontal one.

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

Heres a quick demo

I've added content surpassing the height, and a div with a width greater than 340px inside #CamListDiv. The content is only scrollable vertically.

Upvotes: 34

Related Questions