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;

继承人quick demo

我添加的内容超过了高度，div的宽度大于340px #CamListDiv。内容只能垂直滚动。

Answer 2

顺便说一句，overflow-y属性在IE8及更早版本中无法正常工作。 http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

尝试设置style =“width：100％;”在div内的表中，应该隐藏水平条，因为它不会比它的容器大。

Answer 3

您可以使用css2中的Overflow-y，请参阅here

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

3 个答案: