为啥点击按钮后，table和td的样式不起作用呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
*{
font-family:微软雅黑;
}
input[type='button']{
width:400px;
height:54px;
border:none;
outline:none;
background:#ff0036;
display:block;
margin:400px auto;
color:white;
font-size:16px;
}
input[type='button']:hover{box-shadow:0 1px 5px red;}
table{border:1px solid #9bbb59;margin:20px auto;border-collapse:collapse;}
caption{font-size:20px;color:#333;margin-bottom:10px;font-weight:bold;}
td{border:1px solid #9bbb59;padding:10px 20px 10px 12px;}
</style>
</head>
<body>
<input type="button" value="点击查看总结" onclick="total()">
<script>
function total(){
var str = '<table>';
str += '<caption>事件总结</caption>';
str += '<tr><td colspan="2">鼠标事件</td></tr>';
str += '<tr><td>onclick</td><td>鼠标点击</td></tr>';
str += '<tr><td>ondblclick</td><td>鼠标双击</td></tr>';
str += '<tr><td>onmousedown</td><td>鼠标按下</td></tr>';
str += '<tr><td>onmouseup</td><td>鼠标松开</td></tr>';
str += '<tr><td colspan="2">光标事件</td></tr>';
str += '<tr><td>onmousemove</td><td>光标移动</td></tr>';
str += '<tr><td>onmouseover</td><td>光标移入</td></tr>';
str += '<tr><td>onmouseout</td><td>光标移出</td></tr>';
str += '<tr><td colspan="2">按键事件</td></tr>';
str += '<tr><td>onkeypress</td><td>按键按下并松开</td></tr>';
str += '<tr><td>onkeydown</td><td>按键按下</td></tr>';
str += '<tr><td>onkeyup</td><td>按键松开</td></tr>';
str += '<tr><td colspan="2">焦点事件</td></tr>';
str += '<tr><td>onfocus</td><td>获取焦点</td></tr>';
str += '<tr><td>onblur</td><td>失去焦点</td></tr>';
str += '<tr><td>onchange</td><td>域的内容被改变且此域失去焦点</td></tr>';
str += '<tr><td colspan="2">其他事件</td></tr>';
str += '<tr><td>onload</td><td>预加载</td></tr>';
str += '<tr><td>onsubmit</td><td>提交确认</td></tr>';
str += '</table>';
document.write(str);
}
</script>
</body>
</html>