固定表头和第一列、内容可滚动的table表格

版权声明：转载请注明出处 https://blog.csdn.net/qq_37952101/article/details/81195547

本文首发我的简书

  鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。
  基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，而右下角部分则是可以左右上下滑动，第一行和第一列根据右下角部分的移动来动态设置scrollLeft和scrollTop。示意图如下：

废话不多说，上代码
html部分

    <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>

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);
        }

  如果是在移动端可以直接将scrollbar宽高设为0，后面两部分都不要了，个人感觉这种表格应用场景应该基本都在移动端。
  最后js部分很简单，不过也是关键的一步(基于jQuery)

            //生成表格内容
            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);
            })

  生成内容没什么好说的，主要是第一行和第一列要根据右下角部分一起移动。
最后看看效果图

ps：有这样一段css

        #left-table2{
            margin-bottom: 4px;
        }

  如果左侧不设置margin-bottom的话会出现什么问题呢

  可见滚动条占据了一定的位置，其实横向滚动的时候第一行也有这个问题，只不过看得不明显而已，但是在移动端上隐藏滚动条的话是不会出现这种问题啦。