<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #time { font-size: 200px; text-align: center; color: deeppink; } p { width: 100px; text-align: left; display: inline-block; padding: 10px; margin: 0px; font-size: 18px; background-color: lightcoral; border-top: 1px solid #cccccc; border-right: 1px solid #cccccc; } div { display: block; } #multiplication { /* width: auto; */ display: inline-block !important; display: inline; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } </style> </head>
<body> <h1>9*9乘法表</h1> <div id="multiplication"></div> </body> <script> window.onload = function () { for (let i = 1; i <= 9; i++) { document.getElementById("multiplication").innerHTML += "<div></div>"; for (let j = 1; j <= i; j++) { document.getElementById("multiplication").getElementsByTagName("div")[i - 1].innerHTML += "<p>" + j + "x" + i + "=" + (j * i) + "</p>" } } } </script>
</html>