金恒屋

看了下若干部门的审签单，都不太美观，公司新成立，自己动手优化下内容，美化下表格，在此留存一份。

先上图：

代码：

    <meta charset="UTF-8">
    <title>文山州融资担保有限责任公司联合发文审批单</title>
    <style>
        body {
            font-family: "宋体", SimSun, serif;
            font-size: 14px;
            margin: 0;
            padding: 20px;
            background: #fff;
        }
        .header {
            width: 730px;
            margin: 0 auto 10px;
            text-align: center;
            font-size: 26px;
            font-weight: bold;
        }
        table {
            width: 730px;
            margin: 0 auto;
            border-collapse: collapse;
            border: 1px solid #CDCDCD;
        }
        td {
            border: 1px solid #CDCDCD;
            padding: 4px 6px;
            vertical-align: middle;
        }
        .title {
            background: #f5f5f5;
            text-align: center;
            font-weight: bold;
            white-space: nowrap;
        }
        input, select, textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #bbb;
            padding: 2px 4px;
            font-family: inherit;
            font-size: 14px;
        }
        textarea {
            resize: vertical;
        }
        .fullwidth {
            width: 100%;
        }
        .attach-div {
            width: 100%;
            height: 70px;
        }
        .footer {
            width: 730px;
            margin: 10px auto 0;
            font-size: 14px;
        }
    </style>


    <div class="header">文山州融资担保有限责任公司联合发文审批单</div>

    <table>
        <colgroup>
            <col style="width: 80px">
            <col>
            <col style="width: 95px">
            <col style="width: 80px">
            <col style="width: 80px">
            <col style="width: 110px">
        </colgroup>

        <tbody><tr>
            <td class="title" height="46">发文字号</td>
            <td height="46"><input value="文融担 〔〕号" data-bind="sd20.sendNo"></td>
            <td class="title" height="46">拟稿</td>
            <td height="46">
                <input readonly="" data-bind="sd20.createPsnName" name="T1" size="20"></td>
            <td class="title" height="46">主办部门</td>
            <td height="46">
                <input readonly="" data-bind="sd20.createDept" name="T2" size="20"></td>
        </tr>

        <tr>
            <td class="title" style="height: 44px;">文件标题</td>
            <td colspan="5"><div id="div_title" class="fullwidth"></div></td>
        </tr>

        <tr>
            <td class="title">填写意见</td>
            <td colspan="5"><textarea id="textarea1" rows="3">已阅</textarea></td>
        </tr>

        <tr>
            <td class="title" style="height: 110px;">领导签发</td>
            <td colspan="5"><div id="divOpinion1" class="fullwidth" style="height: 110px;"></div></td>
        </tr>

        <tr>
            <td class="title" style="height: 154px;">部门会签</td>
            <td colspan="5"><div id="divOpinion2" class="fullwidth" style="height: 154px;"></div></td>
        </tr>

        <tr>
            <td class="title" style="height: 66px;">主送机关</td>
            <td colspan="5"><textarea rows="3" data-bind="sd20.mainSendDept"></textarea></td>
        </tr>

        <tr>
            <td class="title" style="height: 66px;">抄送</td>
            <td colspan="5"><textarea rows="3" data-bind="sd20.copySendDept"></textarea></td>
        </tr>

        <tr>
            <td class="title" style="height: 70px;">附件</td>
            <td colspan="5"><div id="attchdiv" class="attach-div"></div></td>
        </tr>

        <tr>
            <td class="title">打印</td>
            <td><input data-bind="sd20.printer"></td>
            <td class="title">校对</td>
            <td><input data-bind="sd20.checker"></td>
            <td class="title">份数</td>
            <td><input data-bind="sd20.sendCopies"></td>
        </tr>

        <tr>
            <td class="title">印发日期</td>
            <td><input type="date" data-bind="sd20.fileDate"></td>
            <td class="title">信息公开</td>
            <td colspan="3">
                <select class="fullwidth" data-bind="sd20.sendIsOpen">
                    <option selected="">主动公开</option>
                    <option>依申请公开</option>
                    <option>不公开</option>
                </select>
            </td>
        </tr>
    </tbody></table>

    <div class="footer">
        <label>附件：</label>
        <div id="attchdiv_footer"></div>
    </div>

 

---

相关信息：