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>

 

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

bootstrap表格固定表头,表格内容滚动条滚动显示_第1张图片

转载于:https://www.cnblogs.com/dukeshi/p/6654293.html

你可能感兴趣的:(bootstrap表格固定表头,表格内容滚动条滚动显示)