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

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

来源

2012-03-30 DarylF

我在星期五早上问过这个，你大概可以猜到。我真的应该知道x是横跨和y是！感谢所有的答案！ – DarylF 2012-03-30 09:34:46

您正在隐藏垂直滚动条，而不是水平滚动条。

变化overflow-y: hidden;到overflow-x: hidden;

继承人quick demo

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

来源

2012-03-30 09:27:52 Curt

我在回帖时并不总是迟到一分钟;但是当我，它的风格！ – f0x 2012-03-30 09:30:02

非常感谢@Curt！ – DarylF 2012-03-30 09:31:08

-2

可以使用溢出-Y，它进来CSS2，看到here

来源

2012-03-30 09:29:36 Java

'overflow'是一个CSS 2属性。 – Joey 2012-03-30 09:32:14

顺便说溢出-y属性不会在IE8正常工作和更早版本。 http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

尝试设置style =“width：100％;”到div内的表格，这应该隐藏横条，因为它不会大于它的容器。

来源

2012-03-30 09:31:14 detay

我会非常谨慎的信任W3Schools作为参考... – Joey 2012-03-30 09:33:01

如果你打算发表评论，你应该建议更好的参考。此外，w3schools从未让我失望。格式也比大多数网站好。 – Anthony 2013-12-15 20:07:21

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

回答

相关问题