首页 » 网站建设 »

TablePress插件响应式表格扩展:Responsive Table

2016年1月25日 / 390次阅读
WordPress插件

  • 打开支付宝,搜索“ 529018372 ”,领取专属红包!每日支付每日领。

表格有大有小,遇到一个大表格,超过页面的宽度怎么办?或者你的网页是响应式的风格,如果让网页中的表格也具有响应式的特性,随页面大小的变化而变化呢?如果你使用的是TablePress插件,恭喜你,TablePress插件有一个免费的扩展插件,Responsive Table扩展插件,可以让你的表格直接变成响应式的表格。

注意:Responsive Table扩展插件只是TablePress插件的一个扩展,必须要先安装TablePress插件,此扩展插件才能生效。此扩展插件的安装启用跟其它插件没有区别,没有配置界面,通过在TablePress插件的表格短码里面增加相应的参数来使响应式的效果生效。

 

Scroll模式

scroll模式就是指表格可以作用拖动。效果如下图:

Responsive Table扩展插件的scroll模式

Responsive Table扩展插件的scroll模式

不过,麦新杰的实践发现,scroll模式其实在TablePress插件中就有,不需要安装这个扩展也可以,配置方法就是勾选水平滚动条,如下:

TablePress插件中的水平滚动条选项

TablePress插件中的水平滚动条选项

如果使用下面要介绍的Flip模式,水平滚动条这个选项就要去掉,否则表格显示会有冲突。

为表格增加scroll效果的短码:
[table id=123 responsive=scroll /]

Flip模式

Flip模式将表格行和列进行颠倒,一般情况表格第一行都是表示某一列的内容,颠倒过来之后,这一列的内容就变成一行,最左边就是这一行的名称。不过,表格还是左右推动,效果如下图:

Responsive Table扩展插件的flip模式

Responsive Table扩展插件的flip模式

注意:使用Flip模式,要将TablePress插件选项中的“水平滚动条”去掉,这个参数不是全局参数,只针对某一个表格。

为表格增加flip效果的短码:
[table id=123 responsive=flip responsive_breakpoint=all /]
responsive_breakpoint这个参数可以不用指定,麦新杰建议最好指定一下,其取值有phone, tablet, desktop, 和all这4种,分别表示在那种尺寸的屏幕下flip模式生效。

phone表示屏幕宽度小于768像素;

tablet表示屏幕宽度小于980像素;

desktop表示屏幕宽度小于1200像素;

all表示在任何尺寸的屏幕下,flip效果都生效。

responsive_breakpoint参数只在flip模式下有效。

 

Collapse模式

Collapse模式的效果是去掉的表格的左右滚动,取而代之的是一个鼠标点击效果,点击之后,将原来无法显示的部分展现出来。效果如下图:

Responsive Table扩展插件的collapse模式

Responsive Table扩展插件的collapse模式

为表格增加collapse效果的短码:
[table id=123 responsive=collapse /]
现在看到TablePress插件的强大了吧!

Responsive Table扩展插件官方下载地址:https://tablepress.org/download/extension/tablepress-responsive-tables.zip

本文链接:http://www.maixj.net/wz/tablepress-responsive-10359

相关文章

留言区

电子邮件地址不会被公开。 必填项已用*标注


前一篇:
后一篇:
推一篇:可靠正规,长期稳定,网络兼职项目!!

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top