bootstrap表格固定表头,表格内容滚动条滚动显示

直接贴代码---

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <link rel="stylesheet" href="js/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" />
  7         <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
  8         <script type="text/javascript" src="js/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js" ></script>
  9         <style>
 10             table th,td{
 11                 width: 100px;
 12             }
 13             
 14             #testTable{
 15                 width:600px;
 16                 margin:0px auto;
 17             }
 18             
 19             #testTable thead{
 20                 display:block;
 21                 overflow-y: scroll;
 22             }
 23             
 24             #testTable tbody{
 25                 display:block;
 26                 max-height:150px;
 27                 overflow-y: scroll;
 28             }
 29         </style>
 30         <script>
 31             $(function(){
 32                 //表格加载后,去除内容第一行的上边框
 33                 $("#testTable").find("tbody td").css("border-top","none");
 34             });
 35         </script>
 36     </head>
 37     <body>
 38         <table id="testTable" class="table table-bordered">  
 39             <thead>  
 40                 <tr>  
 41                     <th>表头一</th>  
 42                     <th>表头二</th>  
 43                     <th>表头三</th>  
 44                     <th>表头四</th>  
 45                     <th>表头五</th>  
 46                     <th>表头六</th>  
 47                 </tr>  
 48             </thead>  
 49             <tbody>  
 50                  <tr>  
 51                     <td>内容一</td>  
 52                     <td>内容二</td>  
 53                     <td>内容三</td>  
 54                     <td>内容四</td>  
 55                     <td>内容五</td>  
 56                     <td>内容六</td>  
 57                 </tr>  
 58                 <tr>  
 59                     <td>内容一</td>  
 60                     <td>内容二</td>  
 61                     <td>内容三</td>  
 62                     <td>内容四</td>  
 63                     <td>内容五</td>  
 64                     <td>内容六</td>  
 65                 </tr>  
 66                 <tr>  
 67                     <td>内容一</td>  
 68                     <td>内容二</td>  
 69                     <td>内容三</td>  
 70                     <td>内容四</td>  
 71                     <td>内容五</td>  
 72                     <td>内容六</td>  
 73                 </tr>  
 74                 <tr>  
 75                     <td>内容一</td>  
 76                     <td>内容二</td>  
 77                     <td>内容三</td>  
 78                     <td>内容四</td>  
 79                     <td>内容五</td>  
 80                     <td>内容六</td>  
 81                 </tr>  
 82                 <tr>  
 83                     <td>内容一</td>  
 84                     <td>内容二</td>  
 85                     <td>内容三</td>  
 86                     <td>内容四</td>  
 87                     <td>内容五</td>  
 88                     <td>内容六</td>  
 89                 </tr>  
 90                 <tr>  
 91                     <td>内容一</td>  
 92                     <td>内容二</td>  
 93                     <td>内容三</td>  
 94                     <td>内容四</td>  
 95                     <td>内容五</td>  
 96                     <td>内容六</td>  
 97                 </tr>  
 98             </tbody>  
 99         </table>  
100         </div>  
101     </div>  
102     </body>
103 </html>

 

最后页面的效果是这样的：

posted @ 2017-04-01 01:27  dukeshi  阅读(3732)  评论(0)  编辑  收藏  举报