表格的实践。
代码：
<html> <head> <meta charset="UTF-8"> <title>费用报销单</title> <style> main{ width: 21cm; margin: 3cm auto 0; box-shadow: 0 0 10px #111; padding: 0.5cm 1cm 0 1cm; box-sizing: border-box; } caption h1{ width: 6cm; font-size: 0.6cm; margin: 0.8cm auto 0; border-bottom: solid 1px black; } caption p{ margin: 0.2cm 0; } caption p span:nth-child(1){ position: relative; left: 40px; } caption p span:nth-child(2){ float: right; } table{ border: 1px solid black; margin: 0 auto; font-size: 0.35cm; border-spacing: 0; border-collapse: collapse; } td{ border: 1px solid black; height: 0.8cm; text-align: center; padding: 0; } tr:nth-child(1) td:nth-child(1){ width: 6cm; } tr:nth-child(1) td:nth-child(2), tr:nth-child(1) td:nth-child(3){ width: 2cm; } tr:nth-child(1) td:nth-child(4){ width: 3cm; } tr:nth-child(1) td:nth-child(5){ width: 3.5cm; } tr:nth-child(8) td{ text-align: left; } table table{ width: 100%; /*去除边框*/ border: none; } table table td{ border: none; border-right: 1px solid black; width: 5cm!important; } table table tr td:last-child{ border-right: none; } footer{ padding: 0.3cm; text-align: center; } </style> <body> <main> <table> <caption> <h1>费　用　报　销　单</h1> <p> <span>报销日期　　　　年　　月　　日</span> <span>附件　　　张</span> </p> </caption> <tr> <td>费用项目</td> <td>类别</td> <td>金额</td> <td rowspan="2">负责人(签章)</td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td rowspan="2">审　查　意　见</td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td rowspan="2">报销人(签章)</td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>报　销　金　额　合　计</td> <td></td> <td></td> <td>￥　　　　　　</td> <td></td> </tr> <tr> <td colspan="5"> 　核实金额(大写)　　佰　　拾　　万　　仟　　佰　　拾　　元　　角　￥ </td> </tr> <tr> <td colspan="5"> <table> <tr> <td>借款数</td> <td></td> <td>应退金额</td> <td></td> <td>应补金额</td> <td></td> </tr> </table> </td> </tr> </table> <footer> 审　核　　　　　　　　　　　　　　　　　　　出　纳　 </footer> </main> </body> </html>
