javascript - 如何制作标题和第一列固定在垂直和水平滚动条上的表格？

Question

我有一个表格，我需要为这个表格制作一个固定的标题和一个固定的第一列。我正在寻找任何可以帮助我解决这个问题的想法。

EDIT

有什么想法吗？

Answer 1

Original Post

function reposHead(e) {
            var h = document.getElementById('headscroll');
            h.scrollLeft = e.scrollLeft;
            var f = document.getElementById('divfrozen');
            f.scrollTop = e.scrollTop;
        }
        function reposHorizontal(e) {
            var h = document.getElementById('headscroll');
            var c = document.getElementById('contentscroll');
            h.scrollLeft = e.scrollLeft;
            c.scrollLeft = e.scrollLeft;

            var sh = document.getElementById('hscrollpos');
            sh.innerHTML = e.scrollLeft;

            var ch = document.getElementById('contentwidth');
            var ic = document.getElementById('innercontent');
            ch.innerHTML = ic.clientWidth;  //c.scrollWidth;

            var ch2 = document.getElementById('contentheight');
            ch2.innerHTML = ic.clientHeight;  //c.scrollWidth;

            var sp = document.getElementById('scrollwidth');
            sp.innerHTML = e.scrollWidth;
        }
        function reposVertical(e) {
            var h = document.getElementById('divfrozen');
            var c = document.getElementById('contentscroll');
            h.scrollTop = e.scrollTop;
            c.scrollTop = e.scrollTop;

            var sh = document.getElementById('vscrollpos');
            sh.innerHTML = e.scrollTop;

            var ch = document.getElementById('contentheight');
            ch.innerHTML = c.scrollHeight;

            var sp = document.getElementById('scrollheight');
            sp.innerHTML = e.scrollHeight;

        }

 table.main
        {
            width: 700px;
            height: 221px;
            table-layout: fixed;
        }
        table.root
        {
            table-layout: fixed;
        }
        table.content
        {
            table-layout: fixed;
            width: 1890px;
        }
        table.head
        {
            table-layout: fixed;
            width: 1890px;
        }
        table.frozen
        {
            table-layout: fixed;
        }
        td
        {
            line-height: 28px;
        }
        div.horizontal-scroll
        {
            width: 703px;
            height: 22px;
            overflow: hidden;
            overflow-x: scroll;
            border: solid 1px #666;
        }
        div.horizontal-scroll div
        {
            width: 2173px;
            height: 1px;
        }
        div.vertical-scroll
        {
            height: 227px;
            width: 22px;
            overflow: hidden;
            overflow-y: scroll;
            border: solid 1px #666;
        }
        div.vertical-scroll div
        {
            height: 377px;
            width: 1px;
        }
        td.inner
        {
            border-left: 1px solid #666;
            border-bottom: 1px solid #666;
            padding: 3px;
            height: 28px;
        }
        td.frozencol
        {
            border-right: 1px double #666;
            width: 200px;
        }
        td.col1
        {
            border-left: none;
            width: 100px;
        }
        td.bottomcol
        {
            /*border-bottom: 1px solid #666;*/
        }
        .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10
        {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipses;
            white-space: nowrap;
        }
        td.head
        {
            /*border-bottom: 1px solid #666;*/
            background-color: #efefef;
            border-top: 1px solid #666;
        }
        .rightcol
        {
            border-right: 1px solid #666;
        }
        .toprow
        {
            border-top: 0px;
        }
        div.root
        {
            margin-left: 0px;
            overflow: hidden;
            width: 200px;
            height: 28px;
            border-bottom: 1px solid #666;
        }
        div.frozen
        {
            overflow: hidden;
            width: 200px; /*border-bottom: 1px solid #666;*/
            height: 200px;
        }
        div.divhead
        {
            overflow: hidden;
            height: 28px;
            width: 500px;
            border-left: 1px solid #666;
            border-right: 1px solid #666; /*border-bottom: 0px solid #666;*/
            border-bottom: 1px solid #666;
        }
        div.content
        {
            overflow: hidden;
            width: 500px;
            height: 200px;
            border-left: 1px solid #666;
            border-right: 1px solid #666; /*border-bottom: 1px solid #666;*/
        }
        td.tablefrozencolumn
        {
            width: 200px;
            border-right: 3px solid #666;
        }
        td.tablecontent
        {
            width: 501px;
        }
        td.tableverticalscroll
        {
            width: 24px;
        }
        div.ff-fill
        {
            height: 23px;
            width: 23px;
            background-color: #ccc;
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
        }

<form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="0" class='main'>
            <tr>
                <td class='tablefrozencolumn'>
                    <div id='divroot' class='root'>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class='root'>
                            <tr>
                                <td class='inner frozencol colwidth head'>
                                    Head0
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id='divfrozen' class='frozen'>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class='frozen'>
                            <tr>
                                <td class='inner frozencol toprow'>
                                    Col0Row2
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row3
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row4
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row5
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row6
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row7
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row8
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row9
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol'>
                                    Col0Row10
                                </td>
                            </tr>
                            <tr>
                                <td class='inner frozencol bottomcol rightcol'>
                                    Col1Row11
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td class='tablecontent'>
                    <div id='headscroll' class='divhead'>
                        <table border="0" cellpadding="0" cellspacing="0" class='head'>
                            <tr>
                                <td class='inner col1 head'>
                                    Head 1
                                </td>
                                <td class='inner col2 head'>
                                    Head 2
                                </td>
                                <td class='inner col3 head'>
                                    Head 3
                                </td>
                                <td class='inner col4 head'>
                                    Head 4
                                </td>
                                <td class='inner col5 head'>
                                    Head 5
                                </td>
                                <td class='inner col6 head'>
                                    Head 6
                                </td>
                                <td class='inner col7 head'>
                                    Head 7
                                </td>
                                <td class='inner col8 head'>
                                    Head 8
                                </td>
                                <td class='inner col9 head'>
                                    Head 9
                                </td>
                                <td class='inner col10 head rightcol'>
                                    Head 10
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id='contentscroll' class='content' onscroll='reposHead(this);'>
                        <table border="0" cellpadding="0" cellspacing="0" class='content' id='innercontent'>
                            <tr>
                                <td class='inner col1 toprow'>
                                    Col1Row2
                                </td>
                                <td class='inner col2'>
                                    Col2Row2
                                </td>
                                <td class='inner col3'>
                                    Col3Row2
                                </td>
                                <td class='inner col4'>
                                    Col4Row2
                                </td>
                                <td class='inner col5'>
                                    Col5Row2
                                </td>
                                <td class='inner col6'>
                                    Col6Row2
                                </td>
                                <td class='inner col7'>
                                    Col7Row2
                                </td>
                                <td class='inner col8'>
                                    Col8Row2
                                </td>
                                <td class='inner col9'>
                                    Col9Row2
                                </td>
                                <td class='inner col10 rightcol'>
                                    Col10Row2
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row3
                                </td>
                                <td class='inner'>
                                    Col2Row3
                                </td>
                                <td class='inner'>
                                    Col3Row3
                                </td>
                                <td class='inner'>
                                    Col4Row3
                                </td>
                                <td class='inner'>
                                    Col5Row3
                                </td>
                                <td class='inner'>
                                    Col6Row3
                                </td>
                                <td class='inner'>
                                    Col7Row3
                                </td>
                                <td class='inner'>
                                    Col8Row3
                                </td>
                                <td class='inner'>
                                    Col9Row3
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row3
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row4
                                </td>
                                <td class='inner'>
                                    Col2Row4
                                </td>
                                <td class='inner'>
                                    Col3Row4
                                </td>
                                <td class='inner'>
                                    Col4Row4
                                </td>
                                <td class='inner'>
                                    Col5Row4
                                </td>
                                <td class='inner'>
                                    Col6Row4
                                </td>
                                <td class='inner'>
                                    Col7Row4
                                </td>
                                <td class='inner'>
                                    Col8Row4
                                </td>
                                <td class='inner'>
                                    Col9Row4
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row4
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row5
                                </td>
                                <td class='inner'>
                                    Col2Row5
                                </td>
                                <td class='inner'>
                                    Col3Row5
                                </td>
                                <td class='inner'>
                                    Col4Row5
                                </td>
                                <td class='inner'>
                                    Col5Row5
                                </td>
                                <td class='inner'>
                                    Col6Row5
                                </td>
                                <td class='inner'>
                                    Col7Row5
                                </td>
                                <td class='inner'>
                                    Col8Row5
                                </td>
                                <td class='inner'>
                                    Col9Row5
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row5
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row6
                                </td>
                                <td class='inner'>
                                    Col2Row6
                                </td>
                                <td class='inner'>
                                    Col3Row6
                                </td>
                                <td class='inner'>
                                    Col4Row6
                                </td>
                                <td class='inner'>
                                    Col5Row6
                                </td>
                                <td class='inner'>
                                    Col6Row6
                                </td>
                                <td class='inner'>
                                    Col7Row6
                                </td>
                                <td class='inner'>
                                    Col8Row6
                                </td>
                                <td class='inner'>
                                    Col9Row6
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row6
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row7
                                </td>
                                <td class='inner'>
                                    Col2Row7
                                </td>
                                <td class='inner'>
                                    Col3Row7
                                </td>
                                <td class='inner'>
                                    Col4Row7
                                </td>
                                <td class='inner'>
                                    Col5Row7
                                </td>
                                <td class='inner'>
                                    Col6Row7
                                </td>
                                <td class='inner'>
                                    Col7Row7
                                </td>
                                <td class='inner'>
                                    Col8Row7
                                </td>
                                <td class='inner'>
                                    Col9Row7
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row7
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row8
                                </td>
                                <td class='inner'>
                                    Col2Row8
                                </td>
                                <td class='inner'>
                                    Col3Row8
                                </td>
                                <td class='inner'>
                                    Col4Row8
                                </td>
                                <td class='inner'>
                                    Col5Row8
                                </td>
                                <td class='inner'>
                                    Col6Row8
                                </td>
                                <td class='inner'>
                                    Col7Row8
                                </td>
                                <td class='inner'>
                                    Col8Row8
                                </td>
                                <td class='inner'>
                                    Col9Row8
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row8
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row9
                                </td>
                                <td class='inner'>
                                    Col2Row9
                                </td>
                                <td class='inner'>
                                    Col3Row9
                                </td>
                                <td class='inner'>
                                    Col4Row9
                                </td>
                                <td class='inner'>
                                    Col5Row9
                                </td>
                                <td class='inner'>
                                    Col6Row9
                                </td>
                                <td class='inner'>
                                    Col7Row9
                                </td>
                                <td class='inner'>
                                    Col8Row9
                                </td>
                                <td class='inner'>
                                    Col9Row9
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row9
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1'>
                                    Col1Row10
                                </td>
                                <td class='inner'>
                                    Col2Row10
                                </td>
                                <td class='inner'>
                                    Col3Row10
                                </td>
                                <td class='inner'>
                                    Col4Row10
                                </td>
                                <td class='inner'>
                                    Col5Row10
                                </td>
                                <td class='inner'>
                                    Col6Row10
                                </td>
                                <td class='inner'>
                                    Col7Row10
                                </td>
                                <td class='inner'>
                                    Col8Row10
                                </td>
                                <td class='inner'>
                                    Col9Row10
                                </td>
                                <td class='inner rightcol'>
                                    Col10Row10
                                </td>
                            </tr>
                            <tr>
                                <td class='inner col1 bottomcol'>
                                    Col1Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col2Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col3Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col4Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col5Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col6Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col7Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col8Row11
                                </td>
                                <td class='inner bottomcol'>
                                    Col9Row11
                                </td>
                                <td class='inner bottomcol rightcol'>
                                    Col10Row11
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td class='tableverticalscroll' rowspan="2">
                    <div class='vertical-scroll' onscroll='reposVertical(this);'>
                        <div>
                        </div>
                    </div>
                    <div class='ff-fill'>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class='horizontal-scroll' onscroll='reposHorizontal(this);'>
                        <div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>