冻结列,固定列,冻结抬头,固定抬头,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="width: 1000px;height: 600px">
        <table border="1" cellpadding="2" cellspacing="0" width="1200px">
            <tr class="FixedHeaderRow1">
                <td class="FixedCell" style="width: 80px" rowspan="2">
                    header1
                </td>
                <td class="FixedCell" style="width: 80px">
                    header2
                </td>
                <td class="FixedCell" style="width: 80px">
                    header3
                </td>
                <td class="FixedCell" style="width: 80px">
                    header4
                </td>
                <td style="width: 80px">
                    header5
                </td>
                <td style="width: 80px">
                    header6
                </td>
                <td style="width: 80px">
                    header7
                </td>
                <td style="width: 80px">
                    header8
                </td>
                <td style="width: 80px">
                    header9
                </td>
                <td style="width: 80px">
                    header10
                </td>
                <td style="width: 80px">
                    header11
                </td>
                <td style="width: 80px">
                    header12
                </td>
                <td style="width: 80px" rowspan="2">
                    header13
                </td>
                <td style="width: 80px" rowspan="2">
                    header14
                </td>
                <td style="width: 80px" rowspan="2">
                    header15
                </td>
            </tr>
            <tr class="FixedHeaderRow2">
                <td class="FixedCell" style="width: 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="width: 80px" align="center">
                    <input type="button" id="" value="aa" />
                </td>
                <td class="FixedCell" style="width: 80px">
                    header16
                </td>
                <td class="FixedHeaderColumn1" style="width: 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;width: 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;width: 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;width: 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;width: 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;width: 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;width: 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;width: 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>

posted @ 2009-09-29 23:45  于斯人也  阅读(3248)  评论(2编辑  收藏  举报