特效描述:利用jquery实现 给表格加滚动条。利用jquery实现给表格加滚动条
代码结构
1. 引入CSS
<link href="css/style.css" type="text/css" rel="stylesheet" />
2. 引入JS
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script> <script type="text/javascript" src="js/jquery.tablescroll.js"></script>
3. HTML代码
<div class="headeline"></div> <!--演示内容开始--> <p><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></p> <div class="demo"> <table cellspacing="0" cellpadding="0" id="thetable"> <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" src="js/jquery.tablescroll.js"></script> <script type="text/javascript"> $(document).ready(function($){ $('#thetable').tableScroll({ width:480, height:150 }); }); </script> <!--演示内容结束--> <div style="text-align:center;clear:both"><br> </div>