• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Tạo bảng responsive cho WordPress với plugin TablePress
hosting-tot-nhat-danh-cho-wordpress

Tạo bảng responsive cho WordPress với plugin TablePress

Cập nhật: 07/07/2024 Trung Hiếu 30 Bình luận

Mục lục Hiện
  • 1. Tạo bảng responsive với plugin TablePress

Tạo bảng responsive cho website WordPress với plugin TablePress.

Nói đến việc tạo bảng trong website WordPress, người ta không thể không nhắc tới plugin TablePress. Với hơn 15 triệu lượt download và hơn 800.000 site đang active, đây là plugin tạo bảng được sử dụng nhiều nhất tính tới thời điểm hiện tại. Sở dĩ TablePress được nhiều người tin dùng như vậy là bởi vì nó dễ sử dụng, đáp ứng được các nhu cầu từ đơn giản đến phức tạp. Tuy nhiên, bảng được tạo bởi plugin TablePress có một nhược điểm là không có khả năng responsive.

Tham khảo thêm:

  • Top 7 plugins tạo bảng tốt nhất trong WordPress
  • Top 6 plugins tạo bảng đăng nhập/ đăng ký tốt nhất cho WordPress

Điều này đồng nghĩa với việc sẽ xuất hiện tình trạng tràn bảng ra khỏi giới hạn chiều ngang của giao diện khi website hiển thị trên các màn hình có kích thước nhỏ và số lượng cột trong bảng quá nhiều. Vậy làm thế nào để khắc phục tình trạng kể trên? Bài viết hôm nay sẽ hướng dẫn các bạn cách để làm điều đó.

Tạo bảng responsive với plugin TablePress

Có vẻ nhóm tác giả của TablePress cũng đã nhận ra được vấn đề này và phát triển thêm một tiện ích mở rộng mang tên Responsive Tables (xem chi tiết).

1. Tất cả những gì các bạn cần làm là download tiện ích đó tại đây, cài đặt (thông qua việc upload) và kích hoạt giống như những plugin bình thường khác.

2. Tiếp theo, mở trình soạn thảo của những trang hoặc bài viết mà bạn đã chèn shortcode của plugin TablePress trước đó. Shortcode của nó có dạng như thế này:

[table id=123 /]

Hãy sửa nó thành dạng:

[table id=123 responsive=mode /]

Thay mode bằng flip, scroll hoặc collapse. Trong đó:

  • flip: thay đổi cách bố trí của bảng (đổi hàng thành cột hoặc ngược lại) và cuộn bảng theo chiều ngang.
  • scroll: cuộn bảng theo chiều ngang. Tôi thường sử dụng chế độ này.
  • collapse: thu gọn hoặc mở rộng các dữ liệu trong bảng (thông qua nút ẩn/ hiện) để phù hợp với kích thước màn hình.

Riêng với  flip, các bạn còn có thể thiết lập kích thước màn hình cụ thể khi chế độ này được kích hoạt. Sử dụng cấu trúc shortcode sau đây:

[table id=123 responsive=flip responsive_breakpoint=device /]

Thay device bằng phone, tablet, desktop, all. Trong đó:

  • phone: kích thước chiều ngang màn hình nhỏ hơn 768 pixels.
  • tablet: kích thước chiều ngang màn hình nhỏ hơn 980 pixels.
  • desktop: kích thước chiều ngang màn hình nhỏ hơn 1200 pixels.
  • all: sử dụng chế độ flip trên tất cả các kích thước màn hình.

Thật đơn giản phải không nào? Hoàn toàn không cần can thiệp gì vào mã nguồn của website cả. Chúc các bạn thành công!

Bạn đang sử dụng plugin nào để tạo bảng responsive trong WordPress? Hãy chia sẻ nó với chúng tôi trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Hiển thị code trong bài viết của WordPress
Hiển thị code trong bài viết của WordPress
Plugin SMTP siêu nhẹ dành cho WordPress
Plugin SMTP siêu nhẹ dành cho WordPress
Plugin contact form siêu nhẹ cho WordPress
Plugin contact form siêu nhẹ cho WordPress

Chuyên mục: Thủ thuật WordPress

wpcanban-com-facebook-group

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Ngăn JS và CSS tải trên những trang nhất định của WordPress
Bài viết sau Khắc phục lỗi number_format_thousands_sep trong WordPress »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Ngoc Blue 425 bình luậnviết

    16/08/2019 lúc 11:50

    Mình không dùng plugin nhưng không hiểu sao bảng mặc định trong bài viết của mình bị mất hết dòng kẻ ngang dọc, chỉ còn khung ở ngoài.
    Mình code css thì nó hiện lên nhưng lại không chỉnh được màu sắc viền bảng trong từng bài viết, cứ mặc định màu theo code vậy thôi.
    Hiếu có biết tại sao ko chỉ cho mình với, tìm mãi mà không ra nguyên nhân

    Bình luận
  2. KeniVinh 166 bình luậnviết

    14/06/2019 lúc 19:08

    Giờ mới để ý là nó không Responsive được, hèn gì nhiều khách try cập vào cứ bảo không thấy, ra dùng toàn điện thoại, bị che mất.

    Bình luận
    • KeniVinh 166 bình luậnviết

      14/06/2019 lúc 19:25

      Nhưng nó cũng chuối thật, ít ra phải hiện cái nút cuộn để người dùng còn biết nội dung bảng bị khuất chứ.

      Bình luận
      • Trung Hiếu Quản lýviết

        16/06/2019 lúc 08:15

        Tự thêm CSS vào được mà. :P

        Bình luận
« 1 2

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới. Tặng miễn phí ebook "Bảo mật WordPress toàn tập" do WP Căn bản biên soạn!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-chat-luong-cao

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Thủ thuật CloudFlare

Sửa lỗi WordPress

Thủ thuật LiteSpeed

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Monarx Security được tích hợp vào dịch vụ WordPress Hosting 15/06/2025
  • Hiển thị code trong bài viết của WordPress 07/06/2025
  • Plugin SMTP siêu nhẹ dành cho WordPress 26/05/2025
  • Plugin contact form siêu nhẹ cho WordPress 23/05/2025

Bình luận mới nhất

  • Trung Hiếu trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • TITAN VINA trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • Trung Hiếu trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • TITAN VINA trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 1.005 Bài viết - 35.545 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting