Bảng bootstrap cuộn tiêu đề cố định ngang và dọc
|
Trong hướng dẫn này, hãy tìm một số phương pháp tạo bảng HTML có tiêu đề cố định và phần thân có thể cuộn được. Tất nhiên, bạn cần sử dụng CSS Show Có thể đạt được kết quả như vậy bằng cách đặt thuộc tính vị trí thành "dính" và chỉ định 0 làm giá trị của thuộc tính trên cùng cho phần tử Như thường lệ, bạn có thể mở liên kết bản demo Dùng thử và chơi với các thuộc tính để hiểu rõ hơn về chúng Bạn cũng có thể đọc chú thích trước mỗi dòng để hiểu rõ hơn về tính chất Col 1Col 21. 12. 11. 22. 21. 32. 31. 42. 41. 52. 51. 62. 51. 72. 51. 82. 5 Tuyệt vời. Huh? . Tôi không muốn thấy thanh cuộn đó bắt đầu từ phần đầu của bảng Vì vậy, hãy tiếp tục với ví dụ tiếp theo và cùng nhau khắc phục sự cố đó Có một phương pháp khác để tạo bảng có tiêu đề cố định và phần thân có thể cuộn được. Trong ví dụ bên dưới, chúng tôi đặt hiển thị thành "khối" cho phần tử để có thể áp dụng các thuộc tính chiều cao và tràn Như đã đề cập trước đây, chúng tôi đã sử dụng tràn. tự động trên tbody cùng với màn hình. khối Đây là kết quả của chúng tôi và tận hưởng sự khác biệt Như bạn đã nhận thấy, chúng tôi đã không sử dụng đường viền trong các ví dụ trước. Tuy nhiên, nếu bạn cần thêm đường viền, bạn chỉ cần sử dụng thuộc tính đường viền trên tất cả các thẻ td Hôm nay mình muốn chia sẻ với các bạn bảng bootstrap scroll ngang dọc. Trong bài đăng này, chúng tôi sẽ hiển thị cho bạn các bảng bootstrap với tiêu đề cố định và phần thân có thể cuộn được, hãy nghe đối với các bảng bootstrap 4 cuộn ngang và dọc, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để thực hiện. Trong bài đăng này, chúng ta sẽ tìm hiểu về Bootstrap Tables Border với một ví dụ bootstrap 4 bảng cuộn ngang và dọc Code Ví dụnội dung Cũng nên đọc phần này 👉 PHP Đánh dấu kết quả tìm kiếm phù hợp với văn bản bằng Mysql bảng bootstrap với cuộnví dụ 1 Tôi hy vọng bạn có ý tưởng về các bảng bootstrap cuộn tiêu đề cố định ngang và dọc Bài viết liên quan
Cũng nên đọc phần này 👉 Hướng dẫn ví dụ về tích hợp Laravel CKEditor Trong khi tạo giao diện người dùng, chúng tôi thường gặp sự cố là có nhiều dữ liệu trong bảng của chúng tôi hơn mức có thể được trang bị trong chế độ xem hiển thị. Để đạt được trải nghiệm tuyệt vời cho người dùng trên các thành phần như biểu đồ Gantt, bảng dữ liệu và bảng tính, chúng tôi thường sử dụng thuộc tính CSS cố định trên các thành phần tiêu đề. Đây là một nhiệm vụ đơn giản khi chỉ thực hiện trên một cạnh của bàn Nhưng nếu chúng ta muốn hiển thị một bảng lớn và do đó cần các tiêu đề cố định trên nhiều cạnh hơn cùng một lúc thì sao?  Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo bố cục để đạt được hành vi cuộn gốc với các tiêu đề cố định như những tiêu đề được hiển thị ở trên mà không cần sử dụng bất kỳ JavaScript nào Lợi ích của giải pháp đề xuất là gì?
Bạn sẽ tìm hiểu cách đặt các phần tử trong DOM và tạo kiểu cho chúng để đạt được các ô dính có thể cuộn đầy đủ chức năng bằng cách sử dụng flexbox từng bước. Nó đang hoạt động và đã được thử nghiệm trên các trình duyệt sau (hãy nhớ rằng Firefox cần các giá trị kiểu chỉ mục z) Đặt các phần tử trong DOM bằng FlexBoxKhía cạnh đầu tiên và quan trọng nhất là thứ tự đúng của các phần tử trong DOM vì các phần tử xuất hiện sau trong DOM sẽ chồng lên các phần tử khác Hãy tưởng tượng rằng chúng ta muốn tạo một bố cục với các tiêu đề cố định trên mỗi cạnh. Do đó, chúng ta cần chia bề mặt của mình thành 9 ô. Tất nhiên, quy trình tương tự cũng áp dụng cho số lượng cạnh dính ít hơn Chúng tôi đặt mọi thứ trong hai thẻ DIV. Đầu tiên với tràn. auto CSS để có chế độ xem có thể cuộn. Thứ hai với các thuộc tính CSS sau
Hình trên minh họa thứ tự DOM thích hợp của các phần tử. Phần tử đầu tiên phải là phần tử ở giữa bố cục, hãy gọi nó là “khung giữa chính giữa”. Đây là phần tử DIV duy nhất có vị trí tương đối trong các kiểu CSS của nó. Các thành phần tiếp theo, theo thứ tự từ ít nhất đến quan trọng nhất, là ngăn dưới cùng ở giữa, ngăn ở giữa bên phải, ngăn ở giữa trên cùng và ngăn ở giữa bên trái. Các phần tử này có vị trí cố định trong các kiểu CSS. Tình huống tương tự áp dụng cho các phần tử nằm ở các góc của chế độ xem. Chúng tôi đặt chúng theo thứ tự. ngăn dưới cùng bên phải, ngăn dưới cùng bên trái, ngăn trên cùng bên phải, ngăn trên cùng bên trái Bây giờ chúng ta biết nên đặt các ô theo thứ tự nào để đạt được hành vi lớp phủ chính xác. Tuy nhiên, chúng ta cần thêm. Ví dụ: ngăn trên cùng bên trái của chúng tôi là thành phần cuối cùng trong DOM và sẽ được hiển thị là thành phần cuối cùng trên màn hình. Điều chúng ta cần làm là thay đổi thứ tự trực quan của các phần tử. Điều này có thể đạt được bằng cách sử dụng thuộc tính thứ tự CSS Hãy sử dụng hình minh họa ở trên và đặt một mũi tên để giúp chúng tôi sắp xếp các phần tử theo đúng thứ tự. Chúng ta cần đi từ góc trên bên trái xuống góc dưới bên phải. Điều này sẽ giúp chúng ta tạo một bảng dễ dàng hơn để xác định thuộc tính CSS flex order cho các phần tử tiêu đề cố định của chúng ta Chúng tôi đã tạo ra một cơ sở vững chắc để đạt được hành vi mong muốn. Các ô được định vị theo đúng thứ tự và hành vi lớp phủ của chúng như mong đợi. Bây giờ chúng ta cần đặt các giá trị CSS cần thiết bổ sung cho chúng. Đối với các phần tử tiêu đề dính của chúng tôi, chúng tôi nên đặt vị trí. dính và các giá trị CSS trên, phải, trái và dưới thích hợp Bây giờ chúng ta có thể đặt kích thước của các ô. Đầu tiên, chúng tôi đặt chiều rộng và chiều cao của “phần tử có thể cuộn”. Tất nhiên, nó cần phải nhỏ hơn nội dung, để hiển thị một số thanh cuộn. Khi đó, chiều rộng và chiều cao của “panes-wrapper” phải là tổng của chiều rộng và chiều cao của các khung chứa Nếu bạn đã đến bước này, kết quả của bạn có thể đã hoạt động như mong đợi, nhưng bạn có thể nhận thấy rằng các ô phía dưới bị che bởi các ô phía trên khi cuộn. Hành vi tương tự cũng xảy ra với các ô bên trái và bên phải. Để tránh lớp phủ này, chúng ta cần thêm một số lề vào các ô, sao cho các ô dưới cùng và trên cùng, cũng như các ô bên trái và bên phải đẩy nhau ra xa Ở đầu bài viết đã đề cập rằng nếu bạn muốn tương thích với trình duyệt Mozilla Firefox, bạn cần đặt kiểu CSS z-index cho một số thành phần. Bảng bên dưới hiển thị các giá trị chỉ mục z được yêu cầu Tóm tắt và ứng dụng ví dụNếu bạn đặt tất cả các thuộc tính như trong bài viết này, bạn sẽ có thể đạt được kết quả như mong đợi. Chúng tôi cũng đã chuẩn bị một ví dụ nhanh cho phép bạn xem toàn bộ quá trình triển khai. Vui lòng sử dụng trải nghiệm của chúng tôi và tiết kiệm thời gian trong khi cố gắng đạt được kết quả khả quan hoặc thử ReactGrid của chúng tôi |
