|||

Responsive cho Table (bảng) trong Website

Table (bảng) là một phần không thể thiếu khi bạn trình bày các bài viết hoặc các trang. Có rất nhiều plugin hỗ trợ bạn làm table tốt. Tuy nhiên, trong trường hợp bạn copy table từ Word, Excel qua, hoặc copy code HTML từ một website khác thì không cần thiết phải dùng tới plugin. Table thường không thân thiện với các màn hình nhỏ, và trong bài viết này, TADA sẽ hướng dẫn bạn điều chỉnh Responsive cho Table thật đơn giản.

Table có chiều ngang lớn

Có một bất tiện của của table là không hỗ trợ tốt trên các thiết bị di động. Thông thường, table sẽ có nhiều cột với chiều ngang lớn, đôi khi vượt quá chiều ngang của trang. Khi hiển thị trên mobile, table sẽ bị bị mất các cột và không hiển thị được nội dung.

Responsive cho Table
Một ví dụ về Table có quá nhiều cột khiến nội dung tràn ra khỏi trang

Ngoài việc hiển thị kém, việc để table tràn ra khỏi màn hình hiển thị sẽ bị Google đánh giá lỗi “Content wider than screen” trong Trải nghiệm người dùng thiết bị di động khi xem ở Google Search Console. Do đó, bạn cần phải sửa lỗi này càng sớm càng tốt.

Đến thời điểm hiện tại, dạng table không có responsive. May mắn là chúng ta có cách điều chỉnh.

Cách điều chỉnh responsive cho table

Tạo cuộn ngang cho table

Một cách đơn giản nhất để table hiển thị thân thiện là tạo cho nó một thanh cuộn ngang (horizontal scrollbar) để người dùng xem các nội dung bị vượt khỏi chiều ngang thiết bị. Bạn chỉ cần bọc thẻ <table>...</table> trong một thẻ <div> với CSS như sau:

<div style="overflow-x:scroll;">
<table>....</table>
</div>

Kết quả sẽ được như hình bên dưới.

Tạo scroll ngang cho bảng

Hoặc bạn cũng có thể chèn thẳng CSS vào <table> như sau:

<table style="overflow-x:scroll; display:block"> .... </table>

Sử dụng TablePress

Nếu bạn đang sử dụng plugin TablePress để tạo table, nhớ bật tính năng Horizontal Scrolling trong DataTable. Mặc định thì TablePress cũng tắt tính năng này.

Bật tính năng Horizontal Scrolling

Đó là các cách để giúp bạn responsive cho table, giúp người đọc dễ dàng đọc được hết nội dung bên trong bảng và giúp Google đánh giá tốt trải nghiệm người dùng. Chúc bạn có một website chất lượng.

Mục lục