zoukankan      html  css  js  c++  java
  • 通过样式表实现固定表头和列

    以下是通过样式表实现的固定表头和列的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=" 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>

    TrackBack:http://www.cnblogs.com/yourhoneysky/archive/2008/04/11/537403.html

  • 相关阅读:
    java 06 作业代码
    java 06 abstract 抽象类
    java 06 重写(覆盖) final 内部类
    java 06 重写和final
    java 06 继承
    java 05 this static构造函数
    java 05 构造函数-构造代码块
    java 05 heap satck 堆和栈
    java 05 成员变量和成员函数-封装
    BJFU-207-基于顺序存储结构的图书信息表的逆序存储
  • 原文地址:https://www.cnblogs.com/hdjjun/p/1300019.html
Copyright © 2011-2022 走看看