科技行者

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

知识库

知识库 安全导航

至顶网软件频道应用软件通过样式表实现固定表头和列发表日期: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>
    • 评论
    • 分享微博
    • 分享邮件
    闂傚倷绶¢崣搴ㄥ窗閺囩偐鏋庨柕蹇嬪灪婵ジ鏌曡箛瀣偓鏍綖閿燂拷

    濠电姷顣介埀顒€鍟块埀顒€缍婇幃妯诲緞閹邦剛鐣洪梺闈浥堥弲婊勬叏濠婂牊鍋ㄦい鏍ㄧ〒閹藉啴鏌熼悜鈺傛珚鐎规洘宀稿畷鍫曞煛閸屾粍娈搁梻浣筋嚃閸ㄤ即宕㈤弽顐ュС闁挎稑瀚崰鍡樸亜閵堝懎濮┑鈽嗗亝濠㈡ê螞濡ゅ懏鍋傛繛鍡樻尭鐎氬鏌嶈閸撶喎顕i渚婄矗濞撴埃鍋撻柣娑欐崌閺屾稑鈹戦崨顕呮▊缂備焦顨呴惌鍌炵嵁鎼淬劌鐒垫い鎺戝鐎氬銇勯弽銊ф噥缂佽妫濋弻鐔碱敇瑜嶉悘鑼磼鏉堛劎绠為柡灞芥喘閺佹劙宕熼鐘虫緰闂佽崵濮抽梽宥夊垂閽樺)锝夊礋椤栨稑娈滈梺纭呮硾椤洟鍩€椤掆偓閿曪妇妲愰弮鍫濈闁绘劕寮Δ鍛厸闁割偒鍋勯悘锕傛煕鐎n偆澧紒鍌涘笧閹瑰嫰鎼圭憴鍕靛晥闂備礁鎼€氱兘宕归柆宥呯;鐎广儱顦伴崕宥夋煕閺囥劌澧ù鐘趁湁闁挎繂妫楅埢鏇㈡煃瑜滈崜姘跺蓟閵娧勵偨闁绘劕顕埢鏇㈡倵閿濆倹娅囨い蹇涗憾閺屾洟宕遍鐔奉伓

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