<!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=" 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; 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>