• 冻结列,固定列,冻结抬头,固定抬头,header,column,Table HTML


    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <style type="text/css">
            .FixedHeaderColumnsTableDiv
            {
                overflow: auto;
                position: relative;
                border: 1px solid;
            }
            .FixedCell
            {
                position: relative;
                top: expression(this.offsetParent.scrollTop);
                left: expression(this.parentElement.offsetParent.scrollLeft);
                background-color: buttonface;
                border: 1px solid black;
                z-index: 1800;
            }
            
            .FixedHeaderRow1
            {
                position: relative;
                top: expression(this.offsetParent.scrollTop);
                background-color: buttonface;
                border: 0px solid black;
                z-index: 300;
            }
            .FixedHeaderRow2
            {
                position: relative;
                top: expression(this.offsetParent.scrollTop);
                background-color: buttonface;
                border: 0px solid black;
                z-index: 290;
            }
            .FixedDataColumn
            {
                position: relative; 
                left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
                background-color: buttonface;
                border: 1px solid black;
                z-index: 200;
            }
            table
            {
                border: 0px solid black;
                z-index: 1;
            }
            td
            {
                position: relative;
                border-right: 1px solid black;
                border-bottom: 1px solid black;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div class="FixedHeaderColumnsTableDiv" style=" 1000px;height: 600px">
            <table border="1" cellpadding="2" cellspacing="0" width="1200px">
                <tr class="FixedHeaderRow1">
                    <td class="FixedCell" style=" 80px" rowspan="2">
                        header1
                    </td>
                    <td class="FixedCell" style=" 80px">
                        header2
                    </td>
                    <td class="FixedCell" style=" 80px">
                        header3
                    </td>
                    <td class="FixedCell" style=" 80px">
                        header4
                    </td>
                    <td style=" 80px">
                        header5
                    </td>
                    <td style=" 80px">
                        header6
                    </td>
                    <td style=" 80px">
                        header7
                    </td>
                    <td style=" 80px">
                        header8
                    </td>
                    <td style=" 80px">
                        header9
                    </td>
                    <td style=" 80px">
                        header10
                    </td>
                    <td style=" 80px">
                        header11
                    </td>
                    <td style=" 80px">
                        header12
                    </td>
                    <td style=" 80px" rowspan="2">
                        header13
                    </td>
                    <td style=" 80px" rowspan="2">
                        header14
                    </td>
                    <td style=" 80px" rowspan="2">
                        header15
                    </td>
                </tr>
                <tr class="FixedHeaderRow2">
                    <td class="FixedCell" style=" 80px" align="center">
                        <table>
                            <tr>
                                <td>
                                    <input type="button" id="" value="aa" />
                                </td>
                                <td>
                                    <input type="button" id="" value="aa" />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="FixedCell" style=" 80px" align="center">
                        <input type="button" id="" value="aa" />
                    </td>
                    <td class="FixedCell" style=" 80px">
                        header16
                    </td>
                    <td class="FixedHeaderColumn1" style=" 80px" colspan="8">
                        header17
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="FixedDataColumn">
                        col1
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col2
                    </td>
                    <td rowspan="2" class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                    <td>
                        col11
                    </td>
                    <td>
                        col12
                    </td>
                    <td rowspan="2">
                        col13
                    </td>
                    <td rowspan="2">
                        col14
                    </td>
                    <td rowspan="2">
                        col15
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col16
                    </td>
                    <td style="word-wrap: word-break" colspan="8">
                        <div style="overflow: auto; 1100px;height: 50px;border: 1px solid">
                            col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达col17爱仕达
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>
    
    
  • 相关阅读:
    symbol
    es6的对象新增的方法
    关于一个有趣的知识
    我为什么要记笔记?
    学习 yjango 博士的学习方法后的总结
    关于写博客的好处
    这是一片博客的测试
    【牛客19】(思路)
    【HDOJ】find your present (2)(思路题)
    【素数】Eratosthenes筛选
  • 原文地址:https://www.cnblogs.com/Microshaoft/p/1576682.html
Copyright © 2020-2023  润新知