首页 > 其他 > 详细

关于boostrap的thead固定tbody滚动

时间:2017-02-19 20:07:52      阅读:134      评论:0      收藏:0      [点我收藏+]

原文地址:http://blog.csdn.net/bbsyi/article/details/51126041#

  1 <!DOCTYPE html>  
  2 <html>  
  3 <head>  
  4     <title></title>  
  5     <meta charset="UTF-8">  
  6     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  8     <script type="text/javascript" src="js/jquery.min.js"></script>  
  9  <script src="iscroll.js"></script>  
 10 </head>  
 11   
 12 <body>  
 13     <div id="con" class="container">  
 14         <div id="2">    
 15         <table class="table table-bordered scrolltable">  
 16         <thead style="display:block;overflow-y: scroll;border-bottom:1px solid #eee;">  
 17                 <tr>  
 18                     <th>栏目一</th>  
 19                     <th>栏目二</th>  
 20                     <th>栏目三</th>  
 21                     <th>栏目一</th>  
 22                     <th>栏目二</th>  
 23                     <th>栏目三</th>  
 24                 </tr>  
 25             </thead>  
 26             <tbody style="display:block; max-height:200px;overflow-y: scroll;">  <!--max-height限制tbody高度-->
 27                 <tr>  
 28                     <td>星期一</td>  
 29                     <td>星期二</td>  
 30                     <td>星期三</td>  
 31                     <td>星期一</td>  
 32                     <td>星期二</td>  
 33                     <td>星期三</td>  
 34                 </tr>  
 35                 <tr>  
 36                     <td>星期一</td>  
 37                     <td>星期二</td>  
 38                     <td>星期三</td>  
 39                     <td>星期一</td>  
 40                     <td>星期二</td>  
 41                     <td>星期三</td>  
 42                 </tr>  
 43                 <tr>  
 44                     <td>星期一</td>  
 45                     <td>星期二</td>  
 46                     <td>星期三</td>  
 47                     <td>星期一</td>  
 48                     <td>星期二</td>  
 49                     <td>星期三</td>  
 50                 </tr>  
 51                 <tr>  
 52                     <td>星期一</td>  
 53                     <td>星期二</td>  
 54                     <td>星期三</td>  
 55                     <td>星期一</td>  
 56                     <td>星期二</td>  
 57                     <td>星期三</td>  
 58                 </tr>  
 59                 <tr>  
 60                     <td>星期一</td>  
 61                     <td>星期二</td>  
 62                     <td>星期三</td>  
 63                     <td>星期一</td>  
 64                     <td>星期二</td>  
 65                     <td>星期三</td>  
 66                 </tr>  
 67                 <tr>  
 68                     <td>星期一</td>  
 69                     <td>星期二</td>  
 70                     <td>星期三</td>  
 71                     <td>星期一</td>  
 72                     <td>星期二</td>  
 73                     <td>星期三</td>  
 74                 </tr>  
 75                 <tr>  
 76                     <td>星期一</td>  
 77                     <td>星期二</td>  
 78                     <td>星期三</td>  
 79                     <td>星期一</td>  
 80                     <td>星期二</td>  
 81                     <td>星期三</td>  
 82                 </tr>  
 83                 <tr>  
 84                     <td>星期一</td>  
 85                     <td>星期二</td>  
 86                     <td>星期三</td>  
 87                     <td>星期一</td>  
 88                     <td>星期二</td>  
 89                     <td>星期三</td>  
 90                 </tr>  
 91             </tbody>  
 92         </table>  
 93         </div>  
 94     </div>  
 95 </body>  
 96 <script type="text/javascript">  
 97     $(document).ready(function(){  
 98         var _width=$(#2).width();  //调整列宽
 99         $(#2 th:first-child).width(_width*0.1);  
100         $(#2 td:first-child).width(_width*0.1);  
101         $(#2 th:nth-child(2)).width(_width*0.2);  
102         $(#2 td:nth-child(2)).width(_width*0.2);  
103         $(#2 th:nth-child(3)).width(_width*0.3);  
104         $(#2 td:nth-child(3)).width(_width*0.3);  
105         $(#2 th:nth-child(4)).width(_width*0.1);  
106         $(#2 td:nth-child(4)).width(_width*0.1);  
107         $(#2 th:nth-child(5)).width(_width*0.1);  
108         $(#2 td:nth-child(5)).width(_width*0.1);  
109         $(#2 th:nth-child(6)).width(_width*0.2);  
110         $(#2 td:nth-child(6)).width(_width*0.2);  
111     })  
112 </script>  
113 </html>  

关于boostrap的thead固定tbody滚动

原文:http://www.cnblogs.com/liuhongli/p/6416720.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!