Bảng phản hồi sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị đầy đủ nội dung. Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng
First NameLast NamePointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsJillSmith50505050505050505050505050505050505050EveJackson94949494949494949494949494949494949494AdamJohnson67676767676767676767676767676767676767
Để tạo một bảng đáp ứng, hãy thêm phần tử vùng chứa có overflow-x:auto
xung quanh
Ghi chú. Trong OS X Lion [trên Mac], thanh cuộn được ẩn theo mặc định và chỉ hiển thị khi được sử dụng [mặc dù "tràn. cuộn" hoặc tự động được đặt]
Xin chào. Bài đăng này chỉ cho bạn cách tạo bảng có thể cuộn với tiêu đề cố định trong bootstrap. Là một Back-end Developer, tôi phải xử lý cơ sở dữ liệu rất nhiều và thường xuyên để hiển thị dữ liệu trong bảng html ở front-end. Và với css bootstrap có sẵn, bạn có thể dễ dàng tạo kiểu bảng trong vài giây. Bootstrap đi kèm với một số kiểu bảng như sọc, có viền, cô đặc và thậm chí phản hồi nhanh, bổ sung thêm thanh cuộn ngang vào bảng, do đó giúp dữ liệu dễ dàng xem được trên thiết bị di động
Khi bạn có tập dữ liệu lớn để hiển thị trên bảng, thì tốt hơn là chia dữ liệu trên nhiều trang bằng cách sử dụng phân trang. Nhưng gần đây tôi phải chọn một tùy chọn khác là làm cho bảng bootstrap có thể cuộn theo chiều dọc với tiêu đề cố định
Tôi đã tìm kiếm một số giải pháp tốt trên mạng nhưng không có gì thỏa đáng. Tôi đã chỉnh sửa css một chút và đạt được kết quả khả quan. Ở đây tôi sẽ chỉ cho bạn cách tôi làm cho bảng bootstrap có thể cuộn được với tiêu đề cố định
Tạo bảng có thể cuộn Bootstrap với tiêu đề cố định
Bước 1] Thêm đánh dấu HTML cho Bảng Bootstrap
Trước tiên, thêm một số đánh dấu cho bảng bootstrap. Ở đây tôi đã tạo một bảng sọc nhưng cũng đã thêm một lớp bảng tùy chỉnh .table-scroll
để thêm thanh cuộn dọc vào bảng và cố định tiêu đề bảng trong khi cuộn xuống
# First Name Last Name County 1 Andrew Jackson Washington 2 Thomas Marion Jackson 3 Benjamin Warren Lincoln 4 Grant Wayne Union 5 John Adams Marshall 6 Morgan Lee Lake 7 John Henry Brown 8 William Jacob Orange 9 Kelly Davidson Taylor 10 Colleen Hurst Randolph 11 Rhona Herrod Cumberland 12 Jane Paul Marshall 13 Ashton Fox Calhoun 14 Garrett John Madison 15 Fredie Winters Washington
Bước 2] Thêm CSS tùy chỉnh
Tiếp theo, chúng ta phải thêm css tùy chỉnh vào bootstrap. Dưới đây là các kiểu css cho lớp. cuộn bảng chúng tôi đã tạo. Sao chép các kiểu này vào một biểu định kiểu riêng và liên kết chúng bên cạnh bootstrap. tập tin css
.well { background: none; height: 320px; } .table-scroll tbody { position: absolute; overflow-y: scroll; height: 250px; } .table-scroll tr { width: 100%; table-layout: fixed; display: inline-table; } .table-scroll thead > tr > th { border: none; }
Bản sửa lỗi trên sẽ tạo ra kết quả mong muốn. Bạn có thể thấy một bảng có thể cuộn đẹp mắt với tiêu đề cố định trong bootstrap