Hiển thị bảng trên css di động

Có một lượng lớn dữ liệu phải được thu thập, xử lý và lưu trữ trong những ngày này. Với dữ liệu đó, chúng tôi có thể tính toán số liệu thống kê, tạo báo cáo và hiểu rõ hơn về doanh nghiệp, tổ chức hoặc xã hội của chúng tôi. Một công cụ tuyệt vời mà chúng ta phải hiển thị dữ liệu phức tạp theo cách rõ ràng và có tổ chức cho người khác là bảng

Là nhà phát triển front-end, chúng tôi cần tìm cách tối ưu hóa các dự án của mình theo các kích thước màn hình và độ phân giải khác nhau của thiết bị ngoài kia. Ở đây tôi sẽ chỉ ra một cách thú vị để làm cho bảng thân thiện với điện thoại thông minh

nhược điểm chính

Hãy tưởng tượng rằng bạn có một doanh nghiệp thương mại điện tử và bạn đã trả tiền cho quảng cáo trên các nền tảng khác nhau (Facebook, Instagram, v.v.), trang web của bạn cũng có hệ thống ưa thích này theo dõi các quảng cáo này và cung cấp cho bạn báo cáo hàng tháng về tỷ lệ chuyển đổi theo nền tảng

Nó cho bạn thấy bảng này

Ồ, bạn đang làm khá tốt, nhưng điều gì sẽ xảy ra khi bạn kiểm tra bảng này trên điện thoại của mình?

ôi. hệ thống ưa thích của bạn có giao diện sến sẩm và không phản hồi. Sự thật là một bảng càng có nhiều cột thì nó càng rộng và như chúng ta biết việc cuộn theo chiều ngang rất khó chịu.

Việc chia bảng thành hai phần sẽ khiến bạn khó hiểu và khó nhìn, trang của bạn sẽ trông kỳ lạ nếu bạn xoay bảng cho vừa khít, vậy chúng ta có thể làm gì?

Vì các thiết bị di động có màn hình nhỏ hơn nên chúng tôi có ít chỗ để chơi hơn nên chúng tôi cần bố cục đơn giản hơn, một giải pháp phổ biến là xếp chồng mọi thứ lên. Với ý nghĩ đó, chúng ta nên thay đổi định dạng của bảng

Một yếu tố gần như bị lãng quên

Lần cuối cùng bạn sử dụng phần tử

là khi nào?

Đây là những gì trang web MDN nói về phần tử Danh sách mô tả

Phần tử HTML

đại diện cho một danh sách mô tả…Việc sử dụng phổ biến cho phần tử này là triển khai bảng thuật ngữ hoặc để hiển thị siêu dữ liệu (danh sách các cặp khóa-giá trị)

Hấp dẫn. đặc biệt là phần về các cặp khóa-giá trị. Nếu bạn nghĩ rằng các ô trong bảng chứa dữ liệu (giá trị) được cấu trúc theo tiêu đề cột (khóa)

Chúng ta có thể biến mỗi hàng của bảng thành một

, sử dụng các tiêu đề cột là

và các giá trị trong các ô là

. Danh sách sẽ dài hơn chứ không rộng hơn (lý tưởng cho màn hình hẹp)

Hai phiên bản của cùng một thứ

Khi chúng tôi biết nhược điểm chính của các bảng trên trang web và một giải pháp khả thi cho điều đó, hãy xem cách chúng tôi có thể làm cho các bảng phản hồi nhanh

Ghi chú. Tôi sẽ chỉ cho bạn thấy một phần của đánh dấu, danh sách và bảng yêu cầu rất nhiều và thành thật mà nói, nó khá lặp đi lặp lại nhưng nếu bạn muốn xem toàn bộ tài liệu, đây là liên kết đến cả đánh dấu và kiểu được sử dụng trong ví dụ tiếp theo

Như mọi người nên làm, tôi sẽ bắt đầu với phiên bản di động của trang và sau đó tôi sẽ chuyển sang phiên bản dành cho máy tính để bàn (phương pháp ưu tiên thiết bị di động)

Đây là HTML cho danh sách

We need a list with five

and their respective data

Phong cách là tùy thuộc vào bạn, nhưng nói chung bạn sẽ nhận được một cái gì đó như thế này

Cuộn xuống tốt hơn cuộn sang trái/phải

Bây giờ chúng tôi thêm đánh dấu của bảng

Phần đầu tiên của đánh dấu bảng

Phần thứ hai của đánh dấu bảng

Tại thời điểm này, cả danh sách và bảng đều được hiển thị trên màn hình, bây giờ là lúc chúng ta cần thêm một dòng CSS quan trọng vào quy tắc bằng bộ chọn .conversion-rate-table và đó là display: none;

Với kiểu đó, không có khoảng trống nào được phân bổ cho bảng khiến nó “biến mất”, một kiểu tương tự như visibility: hidden; không hiển thị các thành phần nhưng phân bổ không gian cho chúng để trình duyệt hiển thị một phần màn hình trống, giống như thiếu thứ gì đó

Bây giờ chạm cuối cùng

Truy vấn phương tiện hoạt động như một công tắc bật tắt, ẩn danh sách và hiển thị bảng và ngược lại

Đây là bảng phản hồi đẹp mắt của chúng tôi

Một số cân nhắc

Như nhiều cách tiếp cận khác trong công nghệ, cách này có một số ưu và nhược điểm. Trước tiên, chúng ta phải biết về đánh dấu bổ sung cũng như các kiểu bổ sung mà chúng ta thêm vào trang, điều đó có nghĩa là cần duy trì nhiều nội dung hơn. Đây là một bảng nhỏ, nhưng hãy tưởng tượng một bảng có 20, 40 hoặc 50 hàng thì quá nhiều. chúng tôi sẽ cần thêm một lượng đánh dấu tương đương (và cả kiểu nữa) cho danh sách

Mặt khác, chúng tôi cung cấp trải nghiệm người dùng tốt hơn, mặc dù bạn quyết định chỉ xem danh sách trên thiết bị di động và máy tính để bàn, nhưng người dùng sẽ phải cuộn xuống nếu họ truy cập trang web của bạn bằng máy tính xách tay. Chúng tôi có thể tiết kiệm cho mình một vài cuộn (trên máy tính để bàn) cô đọng mọi thứ vào một bảng

Chúng ta có nên tối ưu hóa quy trình phát triển ngay cả khi điều đó có nghĩa là trải nghiệm người dùng kém hơn một chút không?