如何在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上只有一個垂直滾動條

回答

相關問題