代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
JS
】
小尺寸屏幕下table自动增加横向滚动条
作者:
Magic_yuan
/ 发布于
2015/8/19
/
651
当一个列比较多的table中,用手机或者缩小屏幕宽度,table会自动将第2列开始设置为滚动条。 改脚本依赖zepto.js 换成jquery也是没问题。 使用方法:table的class增加“responsive”如:
$(document).ready(function () { var switched = false; var updateTables = function () { if (($(window).width() < 767) && !switched) { switched = true; $("table.responsive").each(function (i, element) { splitTable($(element)); }); return true; } else if (switched && ($(window).width() > 767)) { switched = false; $("table.responsive").each(function (i, element) { unsplitTable($(element)); }); } }; $(window).on('load',updateTables); $(window).on("resize", updateTables); function splitTable(original) { original.wrap("<div class='table-wrapper' />"); var copy = original.clone(); copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none"); copy.removeClass("responsive"); original.closest(".table-wrapper").append(copy); copy.wrap("<div class='pinned' />"); original.wrap("<div class='scrollable' />"); } function unsplitTable(original) { original.closest(".table-wrapper").find(".pinned").remove(); original.unwrap(); original.unwrap(); } });
试试其它关键字
横向滚动条
小尺寸
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
C#实现的html内容截取
.
List 切割成几份 工具类
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
Magic_yuan
贡献的其它代码
(
4
)
.
清除maven无用目录
.
小尺寸屏幕下table自动增加横向滚动条
.
python上传和下载
.
操作数据库工具类
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3