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>
posted @ 2019-11-08 10:01 简直HA怕阅读(747) 评论(1) 收藏举报
刷新页面返回顶部
table 实现向下滑动首行冻结，向右滑动左列冻结

公告
