皇冠官网

使用 Responsive Tables 擴展插件讓 TablePress 表格支持自適應

搬瓦工

老唐是 TablePress 的死忠粉,因為覺得這個插件非常好用,是一個非常好用的 WordPress 表格插件,可以非常輕松的在 WordPress 添加表格,也在此強烈推薦給大家使用。TablePress 各方面用下來都是非常滿意的,本站之前也介紹過 TablePress 在大前端 DUX 主題下的一些兼容問題(禁用 TablePress 插件加載的 jQuery 以解決和 WordPress 主題沖突的問題),但是之前一直不滿意的是這個插件沒法自適應,在移動端效果就不太好,如果表格比較大,最右邊的就看不到了。但是前幾天搜了一下發現原來 TablePress 官方提供了一個擴展插件,可以完美解決這個問題,本文就介紹一下這個 Responsive Tables 擴展插件。

TablePress 相關信息:

  • 插件官網:
  • 下載地址:

一、Responsive Tables 安裝和使用

Responsive Tables 是 TablePress 官方開發的一個擴展插件,可以完美解決移動端的自適應問題。相關網址:

  • 插件主頁:
  • 下載地址:

安裝方法很簡單,下載到本地之后然后通過 WordPress 后臺上傳插件進行安裝,我想用過 WordPress 的朋友們都知道怎么安裝。

安裝之后,需要配合 TablePress 使用,使用的時候一共有三種自適應模式,下面一一介紹。

1、默認模式

也就是 TablePress 的默認模式,我們使用形如:

[table “123” not found /]

這樣的代碼來插入表格。

2、自適應模式

把上面的默認模式改成下面這樣,就可以使用自適應模式

[table “123” not found /]

其中的 mode 請換成對應的自適應模式:

  • flip: In this mode, the Extension will change the layout of the table, by flipping it to the side (rows appear as columns and vice versa) and by making it horizontally scrollable. This mode is a good solution for plain data/text tables, but will usually not work nicely in tables with images.
  • scroll: This mode will simply make a table that is too wide to be fully displayed horizontally scrollable. With that, the user can still reach all table data. This is usually a good approach for tables with images, if they don’t automatically resize.
  • collapse: The?collapse?approach can add a hide/expand effect to a table. It will hide the data from those columns that would otherwise be cut-off and instead add that data to a collapsable row that is inserted below each entry. That row can be shown and hidden with a “+” and “-” button. This mode is especially useful in tables that show additional information for some “main” columns, e.g. in a directory table.

翻譯如下:

  • flip:在此模式下,該擴展插件將更改表格的布局,方法是將其翻轉到一側(行顯示為列,反之亦然),并使其可水平滾動。此模式是普通數據 / 文本表的一個很好的解決方案,但通常不能在帶圖像的表中很好地工作。
  • scroll:此模式只會使表格太寬而無法完全顯示為水平滾動。 這樣,用戶仍然可以訪問所有表數據。對于帶有圖像的表,如果它們不自動調整大小,這通常是一種很好的方法。
  • collapse:折疊方法可以向表中添加隱藏 / 展開效果。 它將隱藏那些否則將被截斷的列中的數據,而是將該數據添加到插入每個條目下方的可折疊行。可以使用“+”和“ – ”按鈕顯示和隱藏該行。 此模式在顯示某些“主”列的附加信息的表中特別有用,例如,在目錄表中。

具體效果,我們可以前往官方介紹頁面查看演示:

使用 Chrome 開發者模式把瀏覽器切換成手機端或者直接使用手機打開即可。

二、更多說明和 TablePress 相關教程

本站相關教程:

如果覺得 TablePress 好用,也可以考慮捐贈,老唐本人捐贈過兩次,第一次是首次接觸 TablePress 的時候,覺得太好用了,第二次就是發現這個 Responsive Tables 擴展插件的時候,覺得太太太好用了。

捐贈地址:

也算是對開發者的一點支持了。

贊(0)
版權聲明:本文采用知識共享 署名4.0國際許可協議 [BY-NC-SA] 進行授權
文章名稱:《使用 Responsive Tables 擴展插件讓 TablePress 表格支持自適應
文章鏈接:http://wldci.com/546.html
本站資源僅供個人學習交流,請于下載后24小時內刪除,不允許用于商業用途,否則法律問題自行承擔。