最简单的让多行表格滚动方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>霞光照明</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="Keywords" content="">
    <!-- 引入图标 -->
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <!--引入共同样式以及字体 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <!-- base里面只写自创公共样式 -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" href="css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- 引入外部js用来设置动画效果 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type=" text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
    <script src="js/base.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- index.css是首页的css -->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .table td {
            width: 85px;
            display: inline-block;
            text-align: center;
        }
    </style>

</head>

<body>
    
    <div class="container" style="width: 900px;">
        <table   class="table">
            <thead>
                <tr class="success">
                    <td class="">aa</td>
                    <td>aa</td>
                    <td>aa</td>
                    <td>aa</td>
                    <td>aa</td>
                    <td>aa</td>
                    <td>aa</td>
                    <td>aaq</td>
                    <td>aa</td>
                    <td>a1</td>
                </tr>
            </thead>
        </table>
    </div>
    <div class="container" style="overflow:scroll;height: 300px;width: 900px;">
        <table   class="table">
            <tbody id="p">
            </tbody>
        </table>
    </div>
    <script>
        function addTable() {
            for (var i = 0; i < 500; i++) {
                $("#p").append("<tr class='aa'></tr>");
            }
        }

        function addTable1() {
            for (var i = 0; i < 10; i++) {
                $(".aa").append("<td>q</td>");
            }
        }
        addTable();
        addTable1();
    </script>

</body>

</html>

 

posted @ 2019-12-31 00:02  糖~豆豆  阅读(343)  评论(0编辑  收藏  举报
Live2D