科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道应用软件通过样式表实现固定表头和列发表日期:2007-5-10

通过样式表实现固定表头和列发表日期:2007-5-10

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

通过样式表简单实现表格的表头和列的固定

作者:榕树 来源:CSDN 2008年3月29日

关键字: 固定 实现 通过 Web开发 软件

  • 评论
  • 分享微博
  • 分享邮件

以下是通过样式表实现的固定表头和列的HTML代码

 

<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 class="FixedTitleColumn">
                        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>
    • 评论
    • 分享微博
    • 分享邮件
    闂侇収鍠曞▎銏㈡媼閵忋倖顫�

    濠碘€冲€归悘澶愬箖閵娾晜濮滈悽顖涚摃閹烩晠宕氶崶鈺傜暠闁诡垰鍘栫花锛勬喆椤ゅ弧濡澘妫楅悡娆撳嫉閳ь剟寮0渚€鐛撻柛婵呮缁楀矂骞庨埀顒勫嫉椤栨瑤绻嗛柟顓у灲缁辨繈鏌囬敐鍕杽閻犱降鍨藉Σ鍕嚊閹跺鈧﹦绱旈幋鐐参楅柡鍫灦閸嬫牗绂掔捄铏规闁哄嫷鍨遍崑宥夋儍閸曨剚浠樺ù锝嗗▕閳ь剚鏌ㄧ欢鐐寸▕鐎b晝顏遍柕鍡嫹

    重磅专题
    往期文章
    最新文章