实现table表头固定 内容滚动效果

1. <html>  
2.     <head>  
3.     <style type="text/css">  
4.         /*所有内容都在这个DIV内*/  
5.         div.all {  
6.             border: 3px solid #FF00FF;  
7.             width: 80%; /*这个宽度可根据实际需要改变*/  
8.             clear: right;  
9.         }  
10.           
11.         /*表头在这个DIV内*/  
12.         div.title {  
13.             width: 100%;  
14.         }  
15.         /*内容在这个DIV内*/  
16.         div.content {  
17.             width: 100%;  
18.             overflow: scroll;  /*总是显示滚动条*/  
19.             overflow-x: hidden; /*去掉横向滚动条*/  
20.             height: 100px;  
21.         }  
22.         div.title_left {  
23.             float: left;  
24.             margin-right: 17px;  
25.         }  
26.         div.content_left {  
27.             float: left;  
28.         }  
29.           
30.         .main_table {  
31.             width: 100%;  
32.             border: 1px solid #FF00FF;  
33.             border-collapse: collapse;  /*边线与旁边的合并*/    
34.             table-layout:fixed;  
35.         }  
36.         .main_table tr th {    
37.             border: 1px solid #FF00FF;    
38.             overflow: hidden;  /*超出长度的内容不显示*/    
39.             /*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/    
40.             word-break: break-all;  /*字内断开*/    
41.             text-overflow: ellipsis;  /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/    
42.             white-space: nowrap;    
43.         }    
44.         /*单元格样式*/    
45.         .main_table tr td {    
46.             border: 1px solid #FF00FF;    
47.             overflow: hidden;    
48.             /*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/    
49.             word-break: break-all;    
50.             text-overflow: ellipsis;    
51.             white-space: nowrap;    
52.         }    
53.     </style>  
54.     </head>  
55.     <body>  
56.         <div class="all">  
57.             <div class="title">  
58.                 <div class="title_left">  
59.                 <table class="main_table">  
60.                     <tr>  
61.                         <th>aaa</th><th style="width:30%">aaa</th><th>ccc</th><th>bbb</th>  
62.                     </tr>  
63.                 </table>  
64.                 </div>  
65.             </div>  
66.             <div class="content">  
67.                 <div class="content_left">  
68.                 <table class="main_table">  
69.                     <tr>  
70.                         <td>aaa</td><td style="width:30%">aaa</td><td>ccc</td><td>bbb</td>  
71.                     </tr>  
72.                     <tr>  
73.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
74.                     </tr>  
75.                     <tr>  
76.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
77.                     </tr>  
78.                     <tr>  
79.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
80.                     </tr>  
81.                     <tr>  
82.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
83.                     </tr>  
84.                     <tr>  
85.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
86.                     </tr>  
87.                     <tr>  
88.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
89.                     </tr>  
90.                     <tr>  
91.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
92.                     </tr>  
93.                     <tr>  
94.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
95.                     </tr>  
96.                     <tr>  
97.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
98.                     </tr>  
99.                     <tr>  
100.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
101.                     </tr>  
102.                     <tr>  
103.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
104.                     </tr>  
105.                     <tr>  
106.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
107.                     </tr>  
108.                 </table>  
109.                 </div>  
110.             </div>  
111.         </div>  
112.     </body>  
113. </html>