jquery Table响应式表格js特效代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery Table响应式表格js特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

jquery Table响应式表格js特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery Table��Ӧʽ������</title>
<link rel="stylesheet" href="jquery-responsive-tables.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-responsiveTables.js"></script>
<script type="text/javascript" src="jquery.responsiveText.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('table.responsive').responsiveTables();
});
</script>


<style type="text/css">
body {margin:0; padding:20px; font-family: 'Average Sans', sans-serif; font-size:16px; font-weight:normal; line-height:1.5; background:#589283; color:#fff; text-shadow:2px 2px 2px #3F6558;}
a, a:link, a:visited {color:#fff;text-decoration: none;border-bottom:1px dashed #3F6558;-webkit-transition:border-color 0.3s ease-in;}
a:hover, a:focus {border-bottom:1px dashed #fff;}
h1, h2, h3, p {text-align:center;}
h1, h2, h3 {padding: 0 0.1em;}
h1[data-scrollable] { line-height: 1.85; }
.heading {margin-top:0.25em;font-family:'Pacifico', sans-serif; text-shadow:0.1em 0.1em 2px #3F6558;}
.subheading {font-weight:normal;}
.button {margin:2em 0;}
.button a {background:#3F6558;padding:0.4em 1em;border:none;border-radius:10px;}
.clearfix {clear:both;}
.space {margin:5em 0;}


table {
border: 1px solid #3F6558;
margin-bottom: 20px;
}
thead tr th {
background: #3F6558;
}
th, td {
padding: 0 10px;
}
tbody th, tbody td {
border: 1px solid #3F6558;
}
</style>

</head>
<body>

<table class="responsive" data-min="11" data-max="30" cellpadding="0" cellspacing="0">
  <thead>
	<tr>
	  <th valign="middle">2014</th>
	  <th valign="middle">Internet Explorer</th>
	  <th valign="middle">Firefox</th>
	  <th valign="middle">Chrome</th>
	  <th valign="middle">Safari</th>
	  <th valign="middle">Opera</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th valign="middle">May</th>
	  <td valign="middle">12.6 %</td>
	  <td valign="middle">27.7 %</td>
	  <td valign="middle">52.9 %</td>
	  <td valign="middle">4.0 %</td>
	  <td valign="middle">1.6 %</td>
	</tr>
	<tr>
	  <th valign="middle">April</th>
	  <td valign="middle">12.7 %</td>
	  <td valign="middle">27.9 %</td>
	  <td valign="middle">52.7 %</td>
	  <td valign="middle">4.0 %</td>
	  <td valign="middle">1.7 %</td>
	</tr>
	<tr>
	  <th valign="middle">March</th>
	  <td valign="middle">13.0 %</td>
	  <td valign="middle">28.5 %</td>
	  <td valign="middle">51.7 %</td>
	  <td valign="middle">4.1 %</td>
	  <td valign="middle">1.8 %</td>
	</tr>
	<tr>
	  <th valign="middle">February</th>
	  <td valign="middle">13.5 %</td>
	  <td valign="middle">29.6 %</td>
	  <td valign="middle">50.0 %</td>
	  <td valign="middle">4.1 %</td>
	  <td valign="middle">1.8 %</td>
	</tr>
	<tr>
	  <th valign="middle">January</th>
	  <td valign="middle">14.3 %</td>
	  <td valign="middle">30.2 %</td>
	  <td valign="middle">48.4 %</td>
	  <td valign="middle">4.2 %</td>
	  <td valign="middle">1.9 %</td>
	</tr>
  </tbody>
</table>
</body>
</html>




















附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
36.45 KB
jquery特效7
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章