<>Cách hiển thị mọi loại bảng trên màn hình nhỏ
Bảng dữ liệu của bạn có thể trông rất ổn trên màn hình desktop lớn — nhưng trên mobile thì sao?
Nếu bạn không dùng layout phù hợp, khả năng cao là table đó rất khó đọc trên màn hình nhỏ. Nhiều designer không biết đâu là cách tối ưu — và bài viết này sẽ làm rõ điều đó.
/Vấn đề cốt lõi
Nếu bạn không tối ưu cách hiển thị table trên mobile:
– Người dùng không thể làm việc hiệu quả
– Họ khó truy cập dữ liệu khi cần
– Trải nghiệm bị giới hạn chỉ trên desktop
👉 Nghĩa là: bạn đang giết UX trên mobile mà không nhận ra.
/Sai lầm phổ biến nhất
Designer thường:
Giữ nguyên layout table + thêm scroll ngang
❌ Đây là UX rất tệ vì: Người dùng phải kéo qua lại để đọc từng cột
/Các giải pháp cũ (nhưng chưa đủ tốt)
1. Horizontal scroll
– Dễ implement
– Nhưng khó đọc, khó scan
2. Carousel columns
– Xem từng cột một
❌ Phải click nhiều → rất mệt
3. Accordion
– Ẩn bớt dữ liệu
❌ Gây rối layout + phải click để mở
4. Stacked list
– Chỉ phù hợp với table đơn giản
❌ Không dùng được với table nhiều cột
👉 Kết luận: chưa có giải pháp nào thực sự tối ưu
/Giải pháp tốt nhất: Card View Layout
👉 Thay vì giữ table → biến mỗi record thành 1 card
1. Nguyên tắc:
– Mỗi record = 1 card riêng
– Hiển thị đầy đủ cột
– Không cần scroll ngang
2. Ưu điểm chính:
✅ Không cần scroll ngang
✅ Toàn bộ dữ liệu nhìn thấy ngay
✅ Dễ scan, dễ đọc
✅ Có hierarchy rõ ràng
✅ Action nằm ngay đầu card
3. Nhược điểm
❌ Hiển thị ít record hơn trên 1 màn hình
❌ Phải scroll dọc nhiều hơn
👉 Nhưng đây là trade-off hợp lý trên mobile.
/Cấu trúc của Card (Card Anatomy)
Card gồm 7 phần:
A. Header
– Chứa: ID + checkbox + actions
B. Record ID
– Định danh record
– Luôn nằm góc trái trên
C. Actions
– Icon thao tác
– Góc phải trên
D. Data Header
– Label của từng field
E. Data
– Nội dung dữ liệu
F. Divider
– Phân tách từng dòng
G. Rows
– Mỗi row = 1 cặp label + data
/Với bảng phức tạp hơn thì sao?
Card vẫn xử lý được — vì: Các row stack dọc → không giới hạn số cột
Nhưng sẽ có vấn đề:
– Card quá dài
– Khó scan
/Giải pháp: Simplify trước
Trước khi chuyển sang card:
– Loại bỏ cột không cần thiết
– Gom nhóm dữ liệu
– Ưu tiên thông tin quan trọng
👉 Ví dụ: từ 19 cột → giảm còn 9 cột → dễ hiển thị hơn
/Tối ưu thêm
– Giảm chiều cao row
– Font nhỏ hơn nhưng: Contrast cao + Weight vừa phải
Sắp xếp lại thứ tự: Quan trọng → lên trên
Ví dụ:
– Product name
– Status
– Các thông tin phụ
/Khi card vẫn quá dài → dùng Expandable Card
Giải pháp:
👉 Thêm nút “View More”
– Mặc định: hiển thị dữ liệu quan trọng
– Click → mở rộng toàn bộ
Trade-off:
✅ Hiển thị nhiều record hơn trên màn hình
❌ Phải click để xem full data
👉 Không phù hợp nếu user cần xem full data liên tục
/Kết luận
Các giải pháp cũ cho mobile table: đều không tối ưu
Giải pháp tốt nhất hiện tại: Card View Layout
Vì:
– Trực quan
– Dễ đọc
– Scalable với mọi table
– Không còn phụ thuộc vào scroll ngang
/Insight quan trọng cho bạn
1. Data Prioritization
Không phải data nào cũng cần hiển thị ngay
2. Cognitive Load Design
Giảm effort → tăng hiệu suất
3. Mobile-first thinking
Không phải “responsive lại desktop”. Mà là thiết kế lại từ đầu cho mobile
