关于boostrap的thead固定tbody滚动
原文地址：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>
