Tôi có một bảng với nhiều hàng trên trang của mình. Tôi muốn đặt chiều cao của bảng, giả sử là 500px, sao cho nếu chiều cao của bảng lớn hơn, một thanh cuộn dọc sẽ xuất hiện. Tôi đã cố gắng sử dụng heightthuộc tính CSS trên table, nhưng nó không hoạt động.
Câu trả lời:
Hãy thử sử dụng thuộc tính overflowCSS. Ngoài ra còn có các thuộc tính riêng biệt để xác định hành vi của chỉ tràn ngang ( overflow-x) và tràn dọc ( overflow-y).
Vì bạn chỉ muốn cuộn dọc, hãy thử cách này:
table {
height: 500px;
overflow-y: scroll;
}BIÊN TẬP:
Rõ ràng <table>các phần tử không tôn trọng overflowtài sản. Điều này có vẻ là do <table>các phần tử không được hiển thị display: blocktheo mặc định (chúng thực sự có kiểu hiển thị riêng). Bạn có thể buộc thuộc overflowtính hoạt động bằng cách đặt <table>phần tử thành một loại khối:
table {
display: block;
height: 500px;
overflow-y: scroll;
}Lưu ý rằng điều này sẽ khiến phần tử có chiều rộng 100%, vì vậy nếu bạn không muốn phần tử này chiếm toàn bộ chiều ngang của trang, bạn cũng cần chỉ định chiều rộng rõ ràng cho phần tử.
display:blocktrên bàn để làm cho nó hoạt động giống như một div jsfiddle.net/TSGSA/1
Bạn cần bọc bảng bên trong một phần tử khác và đặt chiều cao của phần tử đó. Ví dụ với css nội tuyến:
<div style="height: 500px; overflow: auto;">
<table>
</table>
</div>display:table;các hàng của chúng display:table-row;và các ô của chúng phải có display:table-cell;và hai bảng sẽ khớp với nhau và dường như là một. (Chú ý: đây không làm việc với các bảng rất lớn, về cơ bản, nó phù hợp với họ lên khi nó có thể tôi đã sử dụng kỹ thuật này nhiều lần..)
để đặt chiều cao của bảng, trước tiên bạn cần đặt thuộc tính css "display: block", sau đó bạn có thể thêm thuộc tính "width / height". Tôi thấy Bài viết Mozilla này là một nguồn rất tốt để tìm hiểu cách tạo kiểu bảng: Liên kết
max-heightthay vì chỉheightvì sau đó sẽ buộc chiều cao của bảng để được500px