Trên các trang web hiện nay, không thể thiếu thành phần table khi xây dựng các trang hiển thị dữ liệu dạng bảng. Tuy nhiên, việc hiển thị đầy đủ thông tin của bảng trên di động là một vấn đề khá phức tạp do kích thước màn hình nhỏ.
Cách tạo table responsive
Chúng ta hãy tạo một bảng gồm 10 cột. Trên màn hình PC, tất cả nội dung được hiển thị đầy đủ. Tuy nhiên, trên màn hình di động, bảng sẽ không co lại mà bị cắt mất theo độ rộng màn hình và xuất hiện thanh cuộn ngang. Việc scroll ngang trên màn hình di động không thích hợp và tiện dụng bằng scroll dọc theo UX.
Để giải quyết vấn đề này, ta có thể sử dụng CSS3 như ví dụ dưới đây:
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { display: block; }
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { position: absolute; top: -9999px; left: -9999px; }
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* Label the data */
td:nth-of-type(1):before { content: "Tên"; }
td:nth-of-type(2):before { content: "Họ"; }
td:nth-of-type(3):before { content: "Chức danh"; }
td:nth-of-type(4):before { content: "Màu yêu thích"; }
td:nth-of-type(5):before { content: "Star Wars hay Star Trek?"; }
td:nth-of-type(6):before { content: "Bí danh"; }
td:nth-of-type(7):before { content: "Ngày sinh"; }
td:nth-of-type(8):before { content: "Thành phố mơ ước"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Dữ liệu ngẫu nhiên"; }
}Sau khi thêm CSS, ta được kết quả như sau:
Ở bảng responsive table, từng cột của mỗi hàng sẽ trở thành một block theo hàng ngang và hiển thị đầy đủ các thông tin. Người dùng chỉ cần scroll dọc để đọc toàn bộ thông tin trên điện thoại di động.
Lưu ý: Ngoài cách cố định dữ liệu vào CSS như "Họ", "Tên", ... ta có thể sử dụng các thuộc tính data của HTML để thêm "data-title" vào thẻ td của dữ liệu.
Tên
Họ
Chức danh
Màu yêu thích
Star Wars hay Star Trek?
Bí danh
Ngày sinh
Thành phố mơ ước
GPA
Dữ liệu ngẫu nhiên
James
Matman
Chief Sandwich Eater
Lettuce Green
Star Trek
Digby Green
13 tháng 1 năm 1979
Thành phố Gotham
3.1
RBX-12
...
...
...
...
## Kết luận
Đây là cách thực hiện table responsive chỉ bằng việc kết hợp sử dụng HTML và CSS. Tuy nhiên, với một số loại table phức tạp, ta có thể sử dụng các plugin như datatables.net. Chúc các bạn thành công!
*Đọc thêm tại:* [https://css-tricks.com/responsive-data-tables/](https://css-tricks.com/responsive-data-tables/)