原创 通过样式表实现固定表头和列收藏

新一篇: 兼容IE和FF的三级导航菜单 | 旧一篇: 自动跳出Frame

 

<html><head>
    
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    
<title>固定表头和列</title>
    
<style>

        .FixedTitleRow
        
{
            position
: relative; 
            top
: expression(this.offsetParent.scrollTop); 
            z-index
: 10;
            background-color
: #E6ECF0;
        
}
        
        .FixedTitleColumn
        
{
            position
: relative; 
            left
: expression(this.parentElement.offsetParent.scrollLeft);
        
}
        
        .FixedDataColumn
        
{
            position
: relative;
            left
: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color
: #E6ECF0;
        
}
    
</style>
</head><body>
<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
    position: absolute; height: 200px;"
>
    
<table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
        
style='table-layout: auto' bordercolor='lightgrey'>
    
<tbody>
    
<tr class="FixedTitleRow">
        
<td class="FixedTitleColumn">ID0</td>
        
<td class="FixedTitleColumn">CK0</td>
        
<td class="FixedTitleColumn">Code0</td>
        
<td class="FixedTitleColumn">Descirption0</td>
        
<td class="FixedTitleColumn">TOL0</td>
        
<td>XS0</td>
        
<td>SS0</td>
        
<td>MS0</td>
        
<td>DS0</td>
        
<td>BS0</td>
        
<td>XL0</td>
        
<td>ML0</td>
        
<td>DL0</td>
        
<td>EM0</td>
        
<td>BM0</td>
    
</tr><tr>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr>
    
</tbody>
    
</table>
</div>
</body></html>

 

发表于 @ 2008年04月24日 11:26:04|评论(loading...)|编辑

新一篇: 兼容IE和FF的三级导航菜单 | 旧一篇: 自动跳出Frame

评论

#snail 发表于2008-04-26 14:46:25  IP: 124.206.20.*
最好把代码的输出效果图贴出来 : )
#fjw8205 发表于2008-04-27 18:30:35  IP: 123.149.21.*
FF上面是没有效果的。
#hEAVEN 发表于2008-04-29 15:53:42  IP: 218.20.156.*
完全不行
#hEAVEN 发表于2008-04-29 16:03:14  IP: 218.20.156.*
说错了,可以,只是页面太丑,一下子让人以为是出错了。。。
#chinmo 发表于2008-05-03 13:27:49  IP: 124.64.211.*
呵呵,只是测试用的,没做那么好看!!要改就自己美化下CSS吧
#过路的 发表于2008-09-02 14:52:11  IP: 222.1.5.*
当海量数据的时候,用这种方法不行,非常之慢,尤其是再给Table加个排序的功能,请问怎么解决?
#过路的 发表于2008-09-02 14:52:14  IP: 222.1.5.*
当海量数据的时候,用这种方法不行,非常之慢,尤其是再给Table加个排序的功能,请问怎么解决?
#过路的 发表于2008-09-02 14:52:15  IP: 222.1.5.*
当海量数据的时候,用这种方法不行,非常之慢,尤其是再给Table加个排序的功能,请问怎么解决?
#診察係 发表于2008-10-27 18:39:27  IP: 125.2.195.*
スワッピングセックス童貞
#kushirong 发表于2008-11-22 10:35:23  IP: 58.217.133.*
帮忙
发表评论  


当前用户设置只有注册用户才能发表评论。如果你没有登录,请点击登录
Csdn Blog version 3.1a
Copyright © 帮你实现梦想