码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS,table的thead固定,tbody显示滚动条

时间:2015-07-15 20:55:40      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

首先是html的table的代码:

 1   <table class="tablediv" id="myTable" border="1"> 
 2         <thead>
 3           <tr>
 4             <td class="wt40">111asdasdassd</td>
 5             <td class="wt50">222asdsa</td>
 6           </tr> 
 7         </thead>
 8         <tbody id="tb">
 9           <tr>
10             <td class="wt40">aaaaaaa23423d</td>
11             <td class="wt50">bbbbb23w23sd</td>
12           </tr>
13           <tr>
14             <td class="wt40">fdfffffffffffffsgdds</td>
15             <td class="wt50">bbbbbbb sd</td>
16           </tr>
17           <tr>
18             <td class="wt40">aaaaaaa sd</td>
19             <td class="wt50">bbbbbbb sd</td>
20           </tr>
21           <tr>
22             <td class="wt40">aaaaaaa sd</td>
23             <td class="wt50">bbbbbbb sd</td>
24           </tr> 
25           <tr>
26             <td class="wt40">aaaaaaa sd</td>
27             <td class="wt50">bbbbbbb sd</td>
28           </tr> 
29           <tr>
30             <td class="wt40">aaaaaaa sd</td>
31             <td class="wt50">bbbbbbb sd</td>
32           </tr> 
33           <tr>
34             <td class="wt40">aaaaaaa sd</td>
35             <td class="wt50">bbbbbbb sd</td>
36           </tr> 
37           <tr>
38             <td class="wt40">aaaaaaa sd</td>
39             <td class="wt50">bbbbbbb sd</td>
40           </tr> 
41           <tr>
42             <td class="wt40">aaaaaaa sd</td>
43             <td class="wt50">bbbbbbb sd</td>
44           </tr> 
45           <tr>
46             <td class="wt40">aaaaaaa sd</td>
47             <td class="wt50">bbbbbbb sd</td>
48           </tr> 
49           <tr>
50             <td class="wt40">aaaaaaa sd</td>
51             <td class="wt50">bbbbbbb sd</td>
52           </tr> 
53         </tbody>
54       </table>

下面是css代码,

 1   table {
 2           margin:0 auto; 
 3           border-collapse:collapse;
 5       }
 6       thead {
 7           background:#CCCCCC;
 8           display:block
 9       }
10       tbody {
11           height:100px;
12           overflow-y:scroll;
13           display:block
14       }
15       .wt40{
16           width:300px;
19       }
20       .wt50{
21           width:450px;
24       } 

浏览器窗口比table宽的时候显示的是正常的,但是浏览器的宽度缩小的时候会出现thead和tbody对不齐的情况,如下图

技术分享

之后,修改css如下,

 .wt40{
          width:300px;
          min-width:300px;
          max-width:300px;
      }
      .wt50{
          width:450px;
          min-width:450px;
          max-width:450px;
      } 

分别加上min-width和max-width之后,这个问题解决了。但是还有一个问题,那就是给table加上宽度(宽度大于tbody的)之后,滚动条就会右移,如图:

技术分享

所以只要把table的width设置的比tbody就好了。

技术分享

纯CSS,table的thead固定,tbody显示滚动条

标签:

原文地址:http://www.cnblogs.com/yaoqj/p/4649341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!