代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//表格版
document.write("<table>");
document.write("<caption>乘法口诀</caption><tbody>")
for (var i = 1; i < 10; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>"+j+"*"+i+"="+i*j+"</td>");
}
document.write("</tr>");
}
document.write("</tbody></table>");
</script>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
td {
display: block;
float: left;
width: 80px;
height: 25px;
text-align: center;
border: 0;
font-size: 14px;
transition: all .5s;
cursor: pointer;
color: #666;
line-height: 25px;
}
td:hover {
background-color: skyblue;
font-size: 16px;
color: #fff;
border-radius: 50%;
box-shadow: 0 2 2 rgba(0,0,0,.3);
}
caption {
font-weight: 700;
font-size: 20px;
color: skyblue;
height: 30px;
line-height:30px;
}
tr {
overflow:hidden;
}
table {
border: 1px solid red;
background-color: #ddd;
margin: 100px auto;
}
</style>
</head>
<body>
</body>
</html>
展示结果：
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
