• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Tạo bảng responsive cho WordPress với plugin TablePress

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

04/02/2017 04/02/2017 Trung Hiếu 30 Bình luận

Mục lục bài viết

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

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

Nói đến việc tạo bảng trong blog/ website WordPress, người ta không thể không nhắc tới plugin TablePress. Với gần 2 triệu lượt download và hơn 500.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 blog/ 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.

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 “123” not found /]

view raw
shorcode.php
hosted with ❤ by GitHub

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

[table “123” not found /]

view raw
shorcode.php
hosted with ❤ by GitHub

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.
  • 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.

Demo chi tiết của các mode (chế độ) này, các bạn có thể xem tại đây.

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 “123” not found /]

view raw
shorcode.php
hosted with ❤ by GitHub

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 blog/ 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 subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)

4.6 / 5 ( 17 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Plugins tạo bảng/ TablePress

dich-vu-cai-dat-website-wordpress-mien-phi

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. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Theme Paradise v4.1 ra mắt, giảm giá lì xì đầu năm
Bài viết sau Khắc phục lỗi number_format_thousands_sep trong WordPress »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. KeniVinh viế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.

    Trả lời
    • KeniVinh viế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ứ.

      Trả lời
      • Trung Hiếu viết

        16/06/2019 lúc 08:15

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

        Trả lời
  2. Ngoc Blue viế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

    Trả lời
« 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!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

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

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

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

dich-vu-toi-uu-website-wordpress-chat-luong-cao

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

  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020
  • Chèn video YouTube responsive vào website WordPress 27/10/2020

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

quet-ma-doc-mien-phi-cho-website

Footer

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

  • Thành trong Tối ưu database WordPress với plugin LiteSpeed Cache
  • Trung Hiếu trong Tối ưu database WordPress với plugin LiteSpeed Cache
  • Thành trong Tối ưu database WordPress với plugin LiteSpeed Cache
  • Ngọc Hân trong Tiếp thị liên kết ở Việt Nam không còn gì hấp dẫn nữa?

Bình luận nhiều nhất (tháng)

  1. Tuyen (7)
  2. Doligo (4)
  3. Nguyễn Văn Long (3)
  4. Tien Coin (3)
  5. Gia Tuấn (2)
  6. Minh (2)

Thông tin hữu ích

  • 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

10 Chuyên mục - 977 Bài viết - 37182 Bình luận

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting