Cách chỉ có một thanh cuộn dọc trên div

Question

Tôi có một bảng nằm trong div. Chiều dài của bảng có thể thay đổi và tôi sử dụng div để thực thi chiều cao.

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

Vấn đề của tôi là khi thanh cuộn dọc là cần thiết, khoảng trống nó chiếm gây ra thanh cuộn ngang xuất hiện. Tôi không cần thanh cuộn ngang và tôi đã cố gắng sử dụng thuộc tính css overflow-y: hidden; để ẩn nó nhưng điều này khiến cả hai thanh cuộn bị ẩn.

Có ai biết tại sao overflow-y:hidden; không hoạt động như mong đợi hoặc cách ngăn thanh cuộn ngang hiển thị?

Answer 1

Bạn đang ẩn thanh cuộn dọc chứ không phải thanh cuộn ngang.

Thay đổi overflow-y: hidden; để overflow-x: hidden;

---

Heres một nội dung quick demo

Tôi đã thêm vượt qua chiều cao, và một div có chiều rộng lớn hơn 340px bên #CamListDiv. Nội dung chỉ có thể cuộn theo chiều dọc.

Answer 2

Bạn có thể sử dụng tràn-y mà đi kèm trong CSS2, xem here

Answer 3

Bằng cách này các tài sản overflow-y không hoạt động đúng trong IE8 trở về trước. http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Thử đặt kiểu = "width: 100%;" vào bảng bên trong div, nên ẩn thanh ngang vì nó sẽ không lớn hơn vùng chứa của nó.