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

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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>

附件:下载该文件资源,减少时间成本(增值服务)