zoukankan      html  css  js  c++  java
  • CSS 固定table 表头和列

    <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="100%; overflow: auto; cursor: default; display: inline;
            position: absolute; height: 200px;">
            <table id='accountTable'  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>
                            &nbsp;</td>
                        <td>
                            &nbsp;</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>
                            &nbsp;</td>
                        <td>
                            &nbsp;</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>
                            &nbsp;</td>
                        <td>
                            &nbsp;</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>
                            &nbsp;</td>
                        <td>
                            &nbsp;</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>
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                        <td>
                            010</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </body>
    </html>
    ID0 CK0 Code0 Descirption0 TOL0 XS0 SS0 MS0 DS0 BS0 XL0 ML0 DL0 EM0     BM0
    88 88 88 88 88 22 22 22 22 22 22 22 22 22     22
    111 111 1111 This is Test 1 001 002 003 004 005 006 007 008 009     010
    111 111 1111 This is Test 1 001 002 003 004 005 006 007 008 009     010
    111 111 1111 This is Test 1 001 002 003 004 005 006 007 008 009     010
  • 相关阅读:
    怎么选取训练神经网络时的Batch size?
    一个batch的数据如何做反向传播
    Chinese NER Using Lattice LSTM-阅读总结
    深度学习Inception
    非极大值抑制--NMS
    CUDA简要理解
    Anaconda+tensorflow+pyTorch安装
    多层神经网络python实现
    深入解析Jieba分词源码(包括Trie存储,正向匹配,HMM,viterbi)
    最小堆排序MinHeap
  • 原文地址:https://www.cnblogs.com/chengulv/p/2235950.html
Copyright © 2011-2022 走看看