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
  • 相关阅读:
    假期进度报告2
    假期进度报告1
    JavaScript下判断元素是否存在
    浪潮之巅阅读笔记06
    浪潮之巅阅读笔记05
    浪潮之巅阅读笔记04
    【C语言】C语言简介
    iOS网络监测方法
    iOS常用手势识别器
    【CoreData】 简单地使用
  • 原文地址:https://www.cnblogs.com/chengulv/p/2235950.html
Copyright © 2011-2022 走看看