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>
  • 相关阅读:
    了解 NoSQL 的必读资料
    关于什么时候用assert（断言）的思考
    这次见到了一些大侠
    NetBeans 时事通讯（刊号 # 87 Jan 12, 2010）
    动态链接库dll，静态链接库lib, 导入库lib
    新女性十得 写得了代码，查得出异常
    记录系统乱谈
    新女性十得 写得了代码，查得出异常
    fullpage.js禁止滚动
    RunningMapReduceExampleTFIDF hadoopclusternet This document describes how to run the TFIDF MapReduce example against ascii books. This project is for those who wants to experiment hadoop as a skunkworks in a small cluster (110 nodes) Google Pro
  • 原文地址：https://www.cnblogs.com/liufei88866/p/1009406.html
Copyright © 2011-2022 走看看