小尺寸屏幕下table自动增加横向滚动条代码,JS代码库,德仔网

代码语言

代码分类

【JS】小尺寸屏幕下table自动增加横向滚动条

作者:Magic_yuan / 发布于2015/8/19/ 655

当一个列比较多的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();
	 }
	});

试试其它关键字

　横向滚动条　　小尺寸　

同语言下

可能有用的

Magic_yuan贡献的其它代码(4)