table 实现向下滑动首行冻结，向右滑动左列冻结

<html>

    <head>

    <meta charset="utf-8">

    <title>测试</title>

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

    <META HTTP-EQUIV="Expires" CONTENT="0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="shortcut icon" href="/favicon.ico">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script type="text/javascript" src="../../../js/jquery-2.1.1.min.js"></script>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        table {

            width: 100%;

            text-align: center;

            border-collapse: collapse;

            border-spacing: 0;

        }

        table td {

            word-break: break-all;

            word-wrap: break-word;

        }

        .container {

            width:100%;

           display: inline-block;

            padding: 0;

            box-sizing: border-box;

        }

        #left-div {

            width: 20%;

            float: left;

        }

        #left-div1 {

                margin-top:60px;

            width: 100%;

        }

        #left-div2 {

            width: 100%;

            height: 81%;/*窗口高度*/

            overflow: hidden;

        }

        #left-table2 {

            margin-bottom: 4px;

        }

        #right-div {

            float: left;

            width: 79.5%;/*窗口宽度*/

        }

        #right-div1 {

                margin-top:60px;

            width: 100%;

            overflow: hidden;

        }

        #right-div2 {

            width: 100%;

            height: 81%;/*窗口高度*/

            overflow: auto;

        }

        #right-table1 {

            width: 700px;

        }

        #right-table2 {

            width: 700px;

            overflow: auto;

        }

        th,

        td {

            height: 50px;

            width: 50px;

            line-height: 20px;

            overflow: hidden;

            text-align: center;

        }

        th {

            color: #1E304F;

            background-color: #D6D6D6;

        }

        td {

            color: #384967;

        }

        tr:nth-of-type(odd) {

            background: #bbdefb;

        }

        /*可以美化一下滚动条*/

        #right-div2::-webkit-scrollbar {

            /*滚动条整体样式*/

            width: 4px;

            height: 4px;

        }

        #right-div2::-webkit-scrollbar-thumb {

            /*滚动条里面小方块*/

            border-radius: 5px;

            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

            background: rgba(0, 0, 0, 0.2);

        }

        #right-div2::-webkit-scrollbar-track {

            /*滚动条里面轨道*/

            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

            border-radius: 0;

            background: rgba(0, 0, 0, 0.1);

        }

    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(function () {

            //生成表格内容

            let htmlLeft = '';

            let htmlRight = '';

            for (let i = 1; i <= 50; i++) {

                htmlLeft += '<tr>';

                htmlLeft += '<td>' + i + '</td>';

                htmlLeft += '</tr>';

            }

            for (let i = 1; i <= 50; i++) {

                htmlRight += '<tr>';

                htmlRight += '<td>A</td>';

                htmlRight += '<td>100</td>';

                htmlRight += '<td>500</td>';

                htmlRight += '<td>1</td>';

                htmlRight += '<td>A</td>';

                htmlRight += '<td>100</td>';

                htmlRight += '<td>500</td>';

                htmlRight += '</tr>';

            }

            $('#left-table2').html(htmlLeft);

            $('#right-table2').html(htmlRight);

            //滚动

            $('#right-div2').on('scroll', function () {

                let top = $(this).scrollTop();

                let left = $(this).scrollLeft();

                $('#left-div2').scrollTop(top);

                $('#right-div1').scrollLeft(left);

            })

        });

     </script>

</head>

    <body >

        <div style="position:fixed; left:0px;right:0px; top:0px; -webkit-transform: translateZ(0);">

            <div style="width:100%;height:60px;background:#3DACF3;text-align:center;color:#fff;">

                <img src="../img/home.png" style="width:40px;height:40px;float:left;margin-top:10px;margin-left:10px;">

                <div style="font-size:20px;padding-top:15px">测试</div>

                <div style="height:15px;line-height:15px;font-size:11px;"></div>

                <div style="clear: both;"></div>

            </div>

        </div>

        <!--数据-->

        <center>

         <div class="container">

        <div id="left-div">

            <div id="left-div1">

                <table>

                    <tr>

                        <th>sheet1</th>

                    </tr>

                </table>

            </div>

            <div id="left-div2">

                <table id="left-table2">

                </table>

            </div>

        </div>

        <div id="right-div">

            <div id="right-div1">

                <table id="right-table1">

                    <tr>

                        <th>sheet2</th>

                        <th>sheet3</th>

                        <th>sheet4</th>

                        <th>sheet5</th>

                        <th>sheet6</th>

                        <th>sheet7</th>

                        <th>sheet8</th>    

                    </tr>

                </table>

            </div>

            <div id="right-div2">

                <table id="right-table2">

                </table>

            </div>

        </div>

        <div style="clear:both;"></div>

    </div>

    </center>

    </body>

</html>
巴特西

table 实现向下滑动首行冻结，向右滑动左列冻结

最新文章

热门文章
