使用 Responsive Tables 扩展插件让 TablePress 表格支持自适应

老唐是 TablePress 的死忠粉，因为觉得这个插件非常好用，是一个非常好用的 WordPress 表格插件，可以非常轻松的在 WordPress 添加表格，也在此强烈推荐给大家使用。TablePress 各方面用下来都是非常满意的，本站之前也介绍过 TablePress 在大前端 DUX 主题下的一些兼容问题（禁用 TablePress 插件加载的 jQuery 以解决和 WordPress 主题冲突的问题），但是之前一直不满意的是这个插件没法自适应，在移动端效果就不太好，如果表格比较大，最右边的就看不到了。但是前几天搜了一下发现原来 TablePress 官方提供了一个扩展插件，可以完美解决这个问题，本文就介绍一下这个 Responsive Tables 扩展插件。

TablePress 相关信息：

• 插件官网：https://tablepress.org
• 下载地址：https://wordpress.org/plugins/tablepress/

一、Responsive Tables 安装和使用

Responsive Tables 是 TablePress 官方开发的一个扩展插件，可以完美解决移动端的自适应问题。相关网址：

• 插件主页：https://tablepress.org/extensions/responsive-tables/
• 下载地址：https://tablepress.org/download/extension/tablepress-responsive-tables.zip

安装方法很简单，下载到本地之后然后通过 WordPress 后台上传插件进行安装，我想用过 WordPress 的朋友们都知道怎么安装。

安装之后，需要配合 TablePress 使用，使用的时候一共有三种自适应模式，下面一一介绍。

1、默认模式

也就是 TablePress 的默认模式，我们使用形如：

这样的代码来插入表格。

2、自适应模式

把上面的默认模式改成下面这样，就可以使用自适应模式

其中的 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：折叠方法可以向表中添加隐藏 / 展开效果。 它将隐藏那些否则将被截断的列中的数据，而是将该数据添加到插入每个条目下方的可折叠行。可以使用“+”和“ – ”按钮显示和隐藏该行。 此模式在显示某些“主”列的附加信息的表中特别有用，例如，在目录表中。

具体效果，我们可以前往官方介绍页面查看演示：https://tablepress.org/extensions/responsive-tables/

使用 Chrome 开发者模式把浏览器切换成手机端或者直接使用手机打开即可。

二、更多说明和 TablePress 相关教程

本站相关教程：

• 禁用 TablePress 插件加载的 jQuery 以解决和 WordPress 主题冲突的问题

如果觉得 TablePress 好用，也可以考虑捐赠，老唐本人捐赠过两次，第一次是首次接触 TablePress 的时候，觉得太好用了，第二次就是发现这个 Responsive Tables 扩展插件的时候，觉得太太太好用了。

捐赠地址：https://tablepress.org/donate/

也算是对开发者的一点支持了。