如何在div上只有一个垂直滚动条

Question

我有一张表在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;没有按预期工作或如何阻止水平滚动条可见？

Answer 1

您正在隐藏垂直滚动条,而不是水平滚动条.

更改overflow-y: hidden;到overflow-x: hidden;

这是一个快速演示

我添加的内容超过了高度,div内部宽度超过340px #CamListDiv.内容只能垂直滚动.