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

最新推荐文章于 2024-07-09 11:30:02 发布

火火火火_Shy

最新推荐文章于 2024-07-09 11:30:02 发布

阅读量687

点赞数

分类专栏： jQuery

原文链接：https://www.jianshu.com/p/61c52ffced0c

版权

jQuery 专栏收录该内容

21 篇文章

订阅专栏

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>


</div>

css:

<style>
    *{
        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>

js：

<script>
    $(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>