直接贴代码---
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>
最后页面的效果是这样的：
