云上小悟
首页   关于   小悟志   栏目   标签   文章   归档   友链   联系

   云上小悟  +  

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

网站建设 / by: 麦新杰 / 发布:2016年1月25日 / 62次阅读 / 暂无评论
标签:WordPress插件   / 最后修改时间: 2016-01-25 13:23:45

网站建设 / 2016年1月25日 / 62次阅读 / 标签:WordPress插件  


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

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

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

 

Scroll模式

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

Responsive Table扩展插件的scroll模式

Responsive Table扩展插件的scroll模式

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

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

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

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

为表格增加scroll效果的短码:

Flip模式

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

Responsive Table扩展插件的flip模式

Responsive Table扩展插件的flip模式

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

为表格增加flip效果的短码:

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效果的短码:

现在看到TablePress插件的强大了吧!

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

本文固定链接:http://www.maixj.net/wangzhan/tablepress-responsive-10359

“TablePress插件响应式表格扩展:Responsive Table”正在等您

发表评论

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


前一篇:
后一篇:

麦新杰的云上小悟独立博客网站文章内容,除非特别注明,全部都是原创,如需转载,请先阅读版权声明!原创文章更具个性,有些文字虽略显随意,但不影响个人思想表达。部分文章是我自己的笔记,为自己记录,总结和收藏,同时也分享给您!这是本博建设的出发点,希望您喜欢并得到您的支持!喝杯茶,慢慢阅读...

©Copyright 麦新杰 SINCE 2014 云上小悟独立博客版权所有  备案号:苏ICP备14045477号-1  

本站360安全检测  Valid CSS!