H5学习之制作费用报销单

表格的实践。

代码：

<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>费&#x3000;用&#x3000;报&#x3000;销&#x3000;单</h1>
                <p>
                    <span>报销日期&#x3000;&#x3000;&#x3000;&#x3000;年&#x3000;&#x3000;月&#x3000;&#x3000;日</span>
                    <span>附件&#x3000;&#x3000;&#x3000;张</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">审&#x3000;查&#x3000;意&#x3000;见</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>报&#x3000;销&#x3000;金&#x3000;额&#x3000;合&#x3000;计</td>
                <td></td>
                <td></td>
                <td>￥&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="5">
                    &#x3000;核实金额(大写)&#x3000;&#x3000;佰&#x3000;&#x3000;拾&#x3000;&#x3000;万&#x3000;&#x3000;仟&#x3000;&#x3000;佰&#x3000;&#x3000;拾&#x3000;&#x3000;元&#x3000;&#x3000;角&#x3000;￥
                </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>
            审&#x3000;核&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;出&#x3000;纳&#x3000;
        </footer>
    </main>    
</body>
</html>