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>

  • 相关阅读:
    Linux的常用用法
    docker入门实践01
    airflow安装rest api插件发现airflow webserver服务不能启动的解决办法
    27.Spark中transformation的介绍
    1.Cloudera Manager安装
    win10系统不能ping通vmware虚假机解决办法
    在airflow的BashOperator中执行docker容器中的脚本容易忽略的问题
    AirFlow后台运行调度程序
    Airflow怎么删除系统自带的DAG任务
    airflow删除dag不在页面显示
  • 原文地址:https://www.cnblogs.com/harbin1900/p/8480993.html
Copyright © 2011-2022 走看看