如果你的网站大量使用table显示数据,想在移动设备上获得好的浏览效果,不妨试试Responsive Tables这个脚本,它可以让很宽的table在有限区域内通滚动条滚动显示。

Crafty Responsive Table

脚本地址:http://zurb.com/playground/responsive-tables

效果如下图所示:

responsive-table

下载该脚本,解压出responsive-tables.cssresponsive-tables.js两个文件,引入这两个文件即可使用。

集成到WordPress主题中

首先将上述两个文件放到主题目录下,然后在functions.php中引入这两个文件

add_action( 'wp_enqueue_scripts', 'theme_enqueue_responsive_tables' );
function theme_enqueue_responsive_tables(){
	// Responsive tables
	wp_enqueue_style( 'responsive-table', get_template_directory_uri() . '/responsive-tables.css' );
	wp_enqueue_script( 'responsive-table', get_template_directory_uri() . '/responsive-tables.js', array( 'jquery') );
}

然后,打开responsive-tables.js这个文件,在最前面加上下面的代码

var $=jQuery;

大功告成,给需要responsive的table加responsive这个class,就可以看到效果

<table class="responsive"></table>