Responsive Table là gì?
Responsive trong thiết kế web là khả năng tự động điều chỉnh giao diện sao cho phù hợp với nhiều kích thước màn hình khác nhau như máy tính, máy tính bảng và điện thoại. Điều này đảm bảo người dùng có trải nghiệm tốt nhất trên mọi thiết bị.
Responsive Table là khái niệm chỉ việc tối ưu hóa khả năng hiển thị của bảng dữ liệu sao cho phù hợp với các kích thước màn hình khác nhau. Đặc biệt là với những bảng nhiều cột, việc hiển thị đầy đủ nội dung trên màn hình nhỏ là rất khó. Do đó, chúng ta cần có giải pháp phù hợp để xử lý.
Dưới đây là ba hướng tiếp cận phổ biến khi xử lý bảng responsive.
Cách 1: Cho phép cuộn ngang
Với cách này, chúng ta chỉ cần thêm thuộc tính overflow-x: auto cho phần tử bao quanh bảng, giúp trình duyệt tự tạo thanh cuộn ngang khi nội dung bị tràn. Trên thiết bị di động, người dùng có thể vuốt sang trái/phải để xem hết các cột.
Code minh họa:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div style="overflow-x: auto">
<table>
<!-- ... -->
</table>
</div>
</body>
</html>
Kết quả:
Ưu điểm:
Nhược điểm:
Cách 2: Biến bảng thành dạng dọc
Ở cách này, bảng sẽ được hiển thị theo chiều dọc: mỗi dòng trở thành một "khối" với tên cột và giá trị tương ứng. Để làm được điều này, cần kết hợp Media Query và thay đổi thuộc tính display của các phần tử trong bảng.
Yêu cầu:
-
Media Queries: Xác định khi nào áp dụng kiểu hiển thị mới (ví dụ: khi màn hình nhỏ hơn 768px).
-
display: block: Biến các phần tử bảng từ table-cell sang block để dễ thay đổi bố cục.
Code minh họa:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<style>
@media (min-width: 320px) and (max-width: 767px) {
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
}
</style>
</head>
<body>
<table>
<!-- ... -->
</table>
</div>
</body>
</html>
Kết quả:
Ưu điểm:
Nhược điểm:
Cách 3: Cho phép tùy chỉnh ẩn/hiện cột
Cách này linh hoạt hơn, cho phép người dùng tự chọn các cột cần xem. Một số thư viện UI hiện nay đã hỗ trợ sẵn tính năng này, nhưng nếu tự làm, bạn cần viết thêm logic để ẩn/hiện cột tùy theo kích thước màn hình hoặc lựa chọn của người dùng.
Kết quả:
Ưu điểm:
Nhược điểm:
Kết luận
Trên đây là ba cách xử lý bảng dữ liệu sao cho phù hợp với thiết bị di động, dựa trên kinh nghiệm thực tế của mình trong các dự án frontend. Tùy vào mục tiêu và mức độ phức tạp của dữ liệu, bạn có thể lựa chọn giải pháp phù hợp nhất cho mình. Cảm ơn các bạn đã theo dõi, hẹn gặp lại trong những bài viết tiếp theo.