zoukankan      html  css  js  c++  java
  • table 表格固定表头和第一列、内容可滚动

    整理了下:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <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: 600px;
                height: 500px;
                padding: 0;
                box-sizing: border-box;
            }
    
            #left-div {
                width: 80px;
                float: left;
            }
    
            #left-div1 {
                width: 100%;
            }
    
            #left-div2 {
                width: 100%;
                height: 250px;
                overflow: hidden;
            }
    
            #left-table2 {
                margin-bottom: 4px;
            }
    
            #right-div {
                float: left;
                width: 240px;
            }
    
            #right-div1 {
                width: 100%;
                overflow: hidden;
            }
    
            #right-div2 {
                width: 100%;
                height: 250px;
                overflow: auto;
            }
    
            #right-table1 {
                width: 320px;
            }
    
            #right-table2 {
                width: 320px;
                overflow: auto;
            }
    
            th,
            td {
                height: 50px;
                width: 80px;
                line-height: 50px;
                overflow: hidden;
                text-align: center;
            }
    
            th {
                color: #1E304F;
                background-color: #F3F8FF;
            }
    
            td {
                color: #384967;
            }
    
            tr:nth-of-type(odd) {
                background: #E7F2FF;
            }
    
            /*可以美化一下滚动条*/
            #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 <= 7; i++) {
                    htmlLeft += '<tr>';
                    htmlLeft += '<td>' + i + '</td>';
                    htmlLeft += '</tr>';
                }
                for (let i = 1; i <= 7; i++) {
                    htmlRight += '<tr>';
                    htmlRight += '<td>A</td>';
                    htmlRight += '<td>100</td>';
                    htmlRight += '<td>500</td>';
                    htmlRight += '<td>1</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 class="container">
            <div id="left-div">
                <div id="left-div1">
                    <table>
                        <tr>
                            <th>编号</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>设备名称</th>
                            <th>设备类型</th>
                            <th>故障类型</th>
                            <th>故障状态</th>
                        </tr>
                    </table>
                </div>
                <div id="right-div2">
                    <table id="right-table2"></table>
                </div>
            </div>
        </div>
    </body>
    
    </html>
    View Code
  • 相关阅读:
    【项目管理和构建】十分钟教程,eclipse配置maven + 创建maven项目(三)
    【项目管理和构建】——Maven下载、安装和配置(二)
    【项目管理和构建】——Maven简介(一)
    Maven 环境变量设置
    【BZOJ282】【洛谷P3829 】【SHOI2012】—信用卡凸包(凸包)
    【BZOJ1076】【SCOI2008】—奖励关(期望+状压dp)
    【BZOJ3687】—简单题(bitset)
    【BZOJ2118】—墨墨的等式(最短路+背包)
    【BZOJ4300】—绝世好题(二进制dp)
    【洛谷P3345】【ZJOI2015】—幻想乡战略游戏(动态点分治)
  • 原文地址:https://www.cnblogs.com/xiangsj/p/10425173.html
Copyright © 2011-2022 走看看