列表标题行固定

关于列表题标固定的方法

以前是把标题和数据行放在一个Table 里面，设置第一行的　position:relative;top:expression(this.offsetParent.scrollTop);

最近把标题和数据分别放在二个Table 里面

标题Table 的宽度比数据Table少一个滚动条的宽。

数据Table 设置一下样式固定高度和自动滚动

代码如下：

 1 <div id="titlediv" style=" text-align:left;" >                   
 2                         <table border="1" style=" width:768px;">
 3                             <tr>                                
 4                                 <th width="20%">
 5                                     商品编号
 6                                 </th>
 7                                 <th width="30%">
 8                                     商品代号
 9                                 </th>
10                                 <th width="30%">
11                                     规格
12                                 </th>
13                                 <th width="20%">
14                                     本地计量
15                                 </th>                                 
16                             </tr>
17                         </table>                    
18                 </div>
19                 <div style="height: 300px; width:100%; overflow: auto;">
20                     <table id="DataTable" width="100%">
21                         
22                     </table>
23                 </div>
View Code

 

 

 

posted on 2013-05-15 14:14  thegavincheng  阅读(244)  评论(0)  编辑  收藏  举报