Bảng cuộn dọc Bootstrap 5

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

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