html bootstrap 表头固定在顶部，表列可以自由滚动的效果

该效果主要是依照 bootstrap 的一个样式，class="navbar-fixed-top";

参考网址为：http://v3.bootcss.com/components/#navbar-fixed-top

贴上代码。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script type="text/javascript" src="js/jquery2.0.3.min.js"></script>
  7 <script type="text/javascript" src="js/bootstrap.min.js"></script>
  8 <link rel="stylesheet" href="css/bootstrap.min.css">
  9 <link rel="stylesheet" href="css/bootstrap-theme.min.css">
 10 <style>
 11 .table tr th,.table tr td{ width:25% !important;}
 12 </style>
 13 </head>
 14 
 15 <body>
 16 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 17   <div class="container">
 18    <table class="table  table-bordered" style="margin-top:9px;">
 19         <tr>
 20             <th>dksliesjfd</th>
 21             <th>dksliesjfd</th>
 22             <th>dksliesjfd</th>
 23             <th>dksliesjfd</th>
 24         </tr>
 25     </table>
 26   </div>
 27 </nav>
 28 <div class="container" style="margin-top:80px;">
 29  <table class="table table-bordered">
 30         <tr>
 31             <td>dksliesjfd dsdsdsliesjfd dsdsdssliesjfd dsdsdssliesjfd dsdsdssd</td>
 32             <td>时光深处，岁月静好.时光深处，岁月静好.时光深处，岁月静好.</td>
 33             <td>dksliesjfd</td>
 34             <td>dksliesjfd</td>
 35         </tr>
 36         <tr>
 37             <td>dksliesjfd</td>
 38             <td>dksliesjfd</td>
 39             <td>dksliesjfd</td>
 40             <td>dksliesjfd</td>
 41         </tr>
 42         <tr>
 43             <td>dksliesjfd</td>
 44             <td>dksliesjfd</td>
 45             <td>dksliesjfd</td>
 46             <td>dksliesjfd</td>
 47         </tr>
 48         <tr>
 49             <td>dksliesjfd</td>
 50             <td>dksliesjfd</td>
 51             <td>dksliesjfd</td>
 52             <td>dksliesjfd</td>
 53         </tr>
 54         <tr>
 55             <td>dksliesjfd</td>
 56             <td>dksliesjfd</td>
 57             <td>dksliesjfd</td>
 58             <td>dksliesjfd</td>
 59         </tr>
 60         <tr>
 61             <td>dksliesjfd</td>
 62             <td>dksliesjfd</td>
 63             <td>dksliesjfd</td>
 64             <td>dksliesjfd</td>
 65         </tr>
 66         <tr>
 67             <td>dksliesjfd</td>
 68             <td>dksliesjfd</td>
 69             <td>dksliesjfd</td>
 70             <td>dksliesjfd</td>
 71         </tr>
 72         <tr>
 73             <td>dksliesjfd</td>
 74             <td>dksliesjfd</td>
 75             <td>dksliesjfd</td>
 76             <td>dksliesjfd</td>
 77         </tr>
 78         <tr>
 79             <td>dksliesjfd</td>
 80             <td>dksliesjfd</td>
 81             <td>dksliesjfd</td>
 82             <td>dksliesjfd</td>
 83         </tr>
 84         <tr>
 85             <td>dksliesjfd</td>
 86             <td>dksliesjfd</td>
 87             <td>dksliesjfd</td>
 88             <td>dksliesjfd</td>
 89         </tr>
 90         <tr>
 91             <td>dksliesjfd</td>
 92             <td>dksliesjfd</td>
 93             <td>dksliesjfd</td>
 94             <td>dksliesjfd</td>
 95         </tr>
 96         <tr>
 97             <td>dksliesjfd</td>
 98             <td>dksliesjfd</td>
 99             <td>dksliesjfd</td>
100             <td>dksliesjfd</td>
101         </tr>
102         <tr>
103             <td>dksliesjfd</td>
104             <td>dksliesjfd</td>
105             <td>dksliesjfd</td>
106             <td>dksliesjfd</td>
107         </tr>
108         <tr>
109             <td>dksliesjfd</td>
110             <td>dksliesjfd</td>
111             <td>dksliesjfd</td>
112             <td>dksliesjfd</td>
113         </tr>
114         <tr>
115             <td>dksliesjfd</td>
116             <td>dksliesjfd</td>
117             <td>dksliesjfd</td>
118             <td>dksliesjfd</td>
119         </tr>
120         <tr>
121             <td>dksliesjfd</td>
122             <td>dksliesjfd</td>
123             <td>dksliesjfd</td>
124             <td>dksliesjfd</td>
125         </tr><tr>
126             <td>dksliesjfd</td>
127             <td>dksliesjfd</td>
128             <td>dksliesjfd</td>
129             <td>dksliesjfd</td>
130         </tr>
131         <tr>
132             <td>dksliesjfd</td>
133             <td>dksliesjfd</td>
134             <td>dksliesjfd</td>
135             <td>dksliesjfd</td>
136         </tr>
137         <tr>
138             <td>dksliesjfd</td>
139             <td>dksliesjfd</td>
140             <td>dksliesjfd</td>
141             <td>dksliesjfd</td>
142         </tr>
143         <tr>
144             <td>dksliesjfd</td>
145             <td>dksliesjfd</td>
146             <td>dksliesjfd</td>
147             <td>dksliesjfd</td>
148         </tr><tr>
149             <td>dksliesjfd</td>
150             <td>dksliesjfd</td>
151             <td>dksliesjfd</td>
152             <td>dksliesjfd</td>
153         </tr>
154         <tr>
155             <td>dksliesjfd</td>
156             <td>dksliesjfd</td>
157             <td>dksliesjfd</td>
158             <td>dksliesjfd</td>
159         </tr>
160         <tr>
161             <td>dksliesjfd</td>
162             <td>dksliesjfd</td>
163             <td>dksliesjfd</td>
164             <td>dksliesjfd</td>
165         </tr>
166         <tr>
167             <td>dksliesjfd</td>
168             <td>dksliesjfd</td>
169             <td>dksliesjfd</td>
170             <td>dksliesjfd</td>
171         </tr>
172         
173         <tr>
174             <td>dksliesjfd</td>
175             <td>dksliesjfd</td>
176             <td>dksliesjfd</td>
177             <td>dksliesjfd</td>
178         </tr>
179         <tr>
180             <td>dksliesjfd</td>
181             <td>dksliesjfd</td>
182             <td>dksliesjfd</td>
183             <td>dksliesjfd</td>
184         </tr>
185         <tr>
186             <td>dksliesjfd</td>
187             <td>dksliesjfd</td>
188             <td>dksliesjfd</td>
189             <td>dksliesjfd</td>
190         </tr>
191         <tr>
192             <td>dksliesjfd</td>
193             <td>dksliesjfd</td>
194             <td>dksliesjfd</td>
195             <td>dksliesjfd</td>
196         </tr>
197         <tr>
198             <td>dksliesjfd</td>
199             <td>dksliesjfd</td>
200             <td>dksliesjfd</td>
201             <td>dksliesjfd</td>
202         </tr>
203         <tr>
204             <td>dksliesjfd</td>
205             <td>dksliesjfd</td>
206             <td>dksliesjfd</td>
207             <td>dksliesjfd</td>
208         </tr>
209         <tr>
210             <td>dksliesjfd</td>
211             <td>dksliesjfd</td>
212             <td>dksliesjfd</td>
213             <td>dksliesjfd</td>
214         </tr>
215         <tr>
216             <td>dksliesjfd</td>
217             <td>dksliesjfd</td>
218             <td>dksliesjfd</td>
219             <td>dksliesjfd</td>
220         </tr>
221     </table>
222 </div>
223 </body>
224 </html>

还有一种方法，是 position:fixed; top:0;也是可以固定在顶部。

但是，bootstrap 可以自适应网页，简单快捷。

第二种方法：如下，给每个td,th设置宽度，这样便可以是表的布局样式相同

/* 增加表头固定，表内容 有滚动条 --start*/
  table thead{display: block;}
  table tbody{display: block; height: 300px; overflow: auto;}
  table thead tr th:nth-child(1){width: 107px;}
  table thead tr th:nth-child(2){width: 130px;}
  table thead tr th:nth-child(3){width: 152px;}
  table thead tr th:nth-child(4){width: 133px;}
  table thead tr th:nth-child(5){width: 142px;}
  table thead tr th:nth-child(6){width: 111px;}
  table thead tr th:nth-child(7){width: 212px;}
  table thead tr th:nth-child(8){width: 160px;}

  table tbody tr td:nth-child(1){width: 109px;}
  table tbody tr td:nth-child(2){width: 132px;}
  table tbody tr td:nth-child(3){width: 155px;}
  table tbody tr td:nth-child(4){width: 135px;}
  table tbody tr td:nth-child(5){width: 144px;}
  table tbody tr td:nth-child(6){width: 114px;}
  table tbody tr td:nth-child(7){width: 214px;}
  table tbody tr td:nth-child(8){width: 145px;}

相关阅读:
java基础笔记-运算符
 关于一个js连续赋值问题之我见(词略穷,见谅)
使用div创建选取框
 JS-取出字符串中重复次数最多的字符并输出
 CSS Hack(转)
开园第一天
 hibernate配置注意事项
 Nginx+Tomcat负载均衡
 SpringMVC上传文件
 Spring-quartz定时系统多任务配置
原文地址：https://www.cnblogs.com/xiaoxiao2014/p/4146744.html

html bootstrap 表头固定在顶部，表列 可以自由滚动的效果

html bootstrap 表头固定在顶部，表列可以自由滚动的效果