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

最新推荐文章于 2024-09-30 08:00:00 发布

兰舟轻帆

最新推荐文章于 2024-09-30 08:00:00 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/JS/NodeJS

本文链接：https://blog.youkuaiyun.com/bj_chengrong/article/details/109490875

HTML/CSS/JS/NodeJS 专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title></title>
    <meta charset="gbk" />
    <style type="text/css">
        .fixContainer {
            width: 600px;
            height: 500px;
            padding: 0;
            box-sizing: border-box;
        }
        .fixContainer tr:nth-of-type(odd) {
            background: #E7F2FF;
        }
        .fixContainer table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
        }
        .fixContainer table td {
            word-break: break-all;word-wrap: break-word;
        }
        /*可以美化一下滚动条*/
        #right_div_2::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 4px;
            height: 4px;
        }
 
        #right_div_2::-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_div_2::-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 <= 17; i++) {
                htmlLeft += '<tr>';
                htmlLeft += '<td style="color: #384967;height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;">' + i + '</td>';
                htmlLeft += '</tr>';
            }
            for (let i = 1; i <= 17; i++) {
                htmlRight += '<tr>';
                htmlRight += '<td style="color: #384967;height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;">A</td>';
                htmlRight += '<td style="color: #384967;height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;">100</td>';
                htmlRight += '<td style="color: #384967;height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;">500</td>';
                htmlRight += '<td style="color: #384967;height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;">1</td>';
                htmlRight += '</tr>';
            }
            $('#left_table_2').html(htmlLeft);
            $('#right_table_2').html(htmlRight);
            //滚动
            $('#right_div_2').on('scroll', function () {
                let top = $(this).scrollTop();
                let left = $(this).scrollLeft();
                $('#left_div_2').scrollTop(top);
                $('#right_div_1').scrollLeft(left);
            })
        });
    </script>
</head>
 
<body>
    <div class="fixContainer">
        <div style="width: 80px;float: left;">
            <div id="left_div_1" style=" width: 100%;">
                <table>
                    <tr>
                        <th style="color: #1E304F;background-color: #F3F8FF;">编号</th>
                    </tr>
                </table>
            </div>
            <div id="left_div_2" style="width: 100%;height: 250px;overflow: hidden;">
                <table id="left_table_2" style="margin-bottom: 4px;"></table>
            </div>
        </div>
        
        <div style="float: left;width: 500px;">
            <div id="right_div_1" style="width: 100%; overflow: hidden;">
                <table id="right_table_1" style="width: 800px;">
                    <tr>
                        <th style="color: #1E304F;background-color: #F3F8FF;">测试列一</th>
                        <th style="color: #1E304F;background-color: #F3F8FF;">测试列二</th>
                        <th style="color: #1E304F;background-color: #F3F8FF;">测试列三</th>
                        <th style="color: #1E304F;background-color: #F3F8FF;">测试列四</th>
                    </tr>
                </table>
            </div>
            <div id="right_div_2" style="width: 100%;height: 250px;overflow: auto;">
                <table id="right_table_2" style="width: 800px;overflow: auto;"></table>
            </div>
        </div>
    </div>
</body>
 
</html>