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
  • 相关阅读:
    C#方法Extra
    C#方法
    C#类型与变量
    归并排序算法
    2020 CiGA Game Jam活动总结
    插入排序算法
    游戏开发随笔
    2019厦门大学信息学院人工智能/智能科学与技术系夏令营（非计算机系）
    基于Dlib、OpenCV开发人脸识别程序的开发建议
    CCF CSP 201703
  • 原文地址：https://www.cnblogs.com/hdjjun/p/1300019.html
Copyright © 2011-2022 走看看