jQuery table scroll表格内容部分滚动条插件



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

31 120 41



特效描述:表格内容 部分滚动条。jQuery table scroll表格内容部分滚动条插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablescroll.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:40px auto 0 auto;}
/* tablescroll */
.tablescroll{font:12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;background-color:#fff;}
.tablescroll td,.tablescroll_wrapper,.tablescroll_head,.tablescroll_foot{border:1px solid #ccc;}
.tablescroll td{padding:5px;}
.tablescroll_wrapper{border-left:0;}
.tablescroll_head{font-size:12px;font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-bottom:3px;}
.tablescroll thead td{border-right:0;border-bottom:0;}
.tablescroll tbody td{border-right:0;border-bottom:0;}
.tablescroll tbody tr.first td{border-top:0;}
.tablescroll_foot{font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-top:3px;}
.tablescroll tfoot td{border-right:0;border-bottom:0;}
</style>
<div class="demo">
	<table id="thetable" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<td>城市</td>
				<td>状态代码</td>
				<td>zip</td>
				<td>纬度</td>
				<td>经度</td>
				<td>县</td>
			</tr>
		</thead>
		<tbody>
			<tr class="first">
				<td>中国</td>
				<td>NY</td>
				<td>00501</td>
				<td>40.8152</td>
				<td>-73.0455</td>
				<td>Suffolk</td>
			</tr>
			<tr>
				<td>中国</td>
				<td>NY</td>
				<td>00544</td>
				<td>40.8152</td>
				<td>-73.0455</td>
				<td>Suffolk</td>
			</tr>
			<tr>
				<td>韩国</td>
				<td>PR</td>
				<td>00601</td>
				<td>18.1788</td>
				<td>-66.7516</td>
				<td>韩国</td>
			</tr>
			<tr>
				<td>Aguada</td>
				<td>PR</td>
				<td>00602</td>
				<td>18.381389</td>
				<td>-67.188611</td>
				<td>Aguada</td>
			</tr>
			<tr>
				<td>Aguadilla</td>
				<td>PR</td>
				<td>00603</td>
				<td>18.4554</td>
				<td>-67.1308</td>
				<td>Aguadilla</td>
			</tr>
			<tr>
				<td>Aguadilla</td>
				<td>PR</td>
				<td>00604</td>
				<td>18.4812</td>
				<td>-67.1467</td>
				<td>Aguadilla</td>
			</tr>
			<tr>
				<td>Aguadilla</td>
				<td>PR</td>
				<td>00605</td>
				<td>18.429444</td>
				<td>-67.154444</td>
				<td>Aguadilla</td>
			</tr>
			<tr>
				<td>Maricao</td>
				<td>PR</td>
				<td>00606</td>
				<td>18.182778</td>
				<td>-66.980278</td>
				<td>Maricao</td>
			</tr>
			<tr>
				<td>Anasco</td>
				<td>PR</td>
				<td>00610</td>
				<td>18.284722</td>
				<td>-67.14</td>
				<td>Anasco</td>
			</tr>
			<tr>
				<td>Angeles</td>
				<td>PR</td>
				<td>00611</td>
				<td>18.286944</td>
				<td>-66.799722</td>
				<td>Utuado</td>
			</tr>
			<tr>
				<td>Arecibo</td>
				<td>PR</td>
				<td>00612</td>
				<td>18.4389</td>
				<td>-66.6924</td>
				<td>Arecibo</td>
			</tr>
			<tr>
				<td>Arecibo</td>
				<td>PR</td>
				<td>00613</td>
				<td>18.1399</td>
				<td>-66.6344</td>
				<td>Arecibo</td>
			</tr>
			<tr>
				<td>Arecibo</td>
				<td>PR</td>
				<td>00614</td>
				<td>18.1399</td>
				<td>-66.6344</td>
				<td>Arecibo</td>
			</tr>
			<tr>
				<td>Bajadero</td>
				<td>PR</td>
				<td>00616</td>
				<td>18.428611</td>
				<td>-66.683611</td>
				<td>Arecibo</td>
			</tr>
			<tr>
				<td>Barceloneta</td>
				<td>PR</td>
				<td>00617</td>
				<td>18.4525</td>
				<td>-66.538889</td>
				<td>Barceloneta</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>10</td>
				<td>2</td>
				<td>15</td>
				<td align="center">-</td>
				<td align="center">-</td>
				<td>9</td>
			</tr>
		</tfoot>
	</table>
</div>
<script type="text/javascript">
$(document).ready(function($){
	$('#thetable').tableScroll({
		width:480,
		height:150
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到