带打印的表格
至少能弄出来个表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<style>
.box{
height:600px;
width:600px;
margin:200px auto;
}
table {
margin: 0 auto;
width:100%;
/* table-layout:fixed; */
}
table td {
background: pink;
padding: 5px 5px;
text-align: center;
}
</style>
<body>
<div>
<!-- border 规定表格边框的宽度 -->
<!-- cellpadding 规定单元边沿与其内容之间的空白 -->
<!-- cellspacing 规定单元格之间的空白。-->
<!-- width 规定表格的宽度 单位多为 px % -->
<!-- colspan 合并行 -->
<!-- rowspan 合并列 -->
<!-- 让字体从上到下可以用 <br> -->
<!-- table-layout:fixed; 列宽由表格宽度和列宽度设定。(有兴趣的自己研究吧，还未弄懂) -->
<!-- border-collapse 为表格设置合并边框模型 -->
<!-- table{border-collapse: collapse;} -->
<!-- page-break-before 设置在表格元素之后始终进行分页的分页行为：(大概就是用来表格分页的一个东西) -->
<!-- <div style="width:100%; page-break-before: always;"></div> -->
<!-- 设置纸张的时候可能用得到 -->
<!-- body {
width: 190mm;
padding-left: 10mm;
padding-right: 10mm;
} -->
</div>
<div class="box">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">弄个表格</td>
</tr>
<tr>
<td rowspan="3"> 字 <br> 竖<br>起<br>来 </td>
<td>嘿嘿</td>
<td>哈哈</td>
</tr>
<tr>
<td>世</td>
<td>界</td>
</tr>
<tr>
<td>你</td>
<td>好</td>
</tr>
</table>
</div>
<!-- 打印 原来的操作觉得很牛逼-->
<!-- onclick='document.getElementById("qwert").style.visibility="hidden";window.print();' -->
<div id="qwert" onclick='dayin()'>
打印
</div>
</body>
</html>
<script>
function dayin(){
var btn = document.getElementById("qwert")
btn.style.visibility="hidden"
window.print()
}
</script>
<style>
#qwert{
font-family:'微软雅黑';
width: 50px;
height: 50px;
line-height: 50px;
padding: 10px;
font-size:22px;
background: #eff5ff;
border-radius: 100%;
position: fixed;
top: 20px;
right: 20px;
box-shadow: 2px 2px 5px #888888;
cursor:pointer;
color: #43ab9b;
}
</style>
