您的位置：首页 > Web前端 > BootStrap

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

2017-04-01 01:27 671 查看

直接贴代码---

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>

 

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航