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

    <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>

  • 相关阅读:
    一款纯css3实现的鼠标经过按钮特效
    一款基于jquery漂亮的按钮
    一款仿ios7的switches开关按钮
    基于jquery的可拖动div
    一款基于jquery ui漂亮的可拖动div实例
    一款html5和css3实现的小机器人走路动画
    一款纯css3实现的图片3D翻转幻灯片
    纯css3实现图片三角形排列
    7款基于jquery的动画搜索框
    一款纯css3实现的机器人看书动画效果
  • 原文地址:https://www.cnblogs.com/harbin1900/p/8480993.html
Copyright © 2011-2022 走看看