zoukankan      html  css  js  c++  java
  • 每页都有的表头和打印分页

    本文转自:http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html
    
    
    在做项目的时候碰到的。用户要求,页面呈现太长时,打印的时候,要求,每页上都要有表头。找了好久,才在网上找到。原来,是要对每个表格,定义其thead,并对其样式设置成:style="display:table-header-group"。如果要求有表尾,也一样,要定义其tfoot,并对style="display:table-footer-group"
    
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style type="text/css">
            @media print {
                INPUT {
                    displaynone;
                }
            }
        </style>
    </head>
     
    <body>
        <table border="0" style="font-size9pt;" width="300px" align="center">
            <thead style="displaytable-header-groupfont-weightbold">
                <tr>
                    <td colspan="2" align="center" style="font-weightboldborder3px double red">每页都有的表头</td>
                </tr>
            </thead>
            <tbody style="text-aligncenter">
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr style="page-break-afteralways;">
                    <td>表格内容1</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr style="page-break-afteralways;">
                    <td>表格内容2</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr style="page-break-afteralways;">
                    <td>表格内容3</td>
                    <td>表格内容</td>
                </tr>
            </tbody>
            <tfoot style="displaytable-footer-groupfont-weightbold">
                <tr>
                    <td colspan="2" align="center" style="font-weightboldborder3px double blue">每页都有的表尾</td>
                </tr>
            </tfoot>
        </table>
        <input type="button" value=" 打 印 " onclick="javascript: window.print();">
    </body>
    </html>
  • 相关阅读:
    超详细:idea中同一项目同时使用Git与SVN,切换版本控制
    MailKit在.NetCore5下发送邮件 An error occurred while attempting to establish an SSL or TLS connection
    ClickHouse学习系列之七【系统命令介绍】
    ClickHouse学习系列之六【访问权限和账户管理】
    ClickHouse学习系列之五【系统库system说明】
    ClickHouse学习系列之四【副本&分片部署说明】
    MongoDB4.2 分片扫盲说明
    MongoDB4.2 副本集扫盲说明
    【工程应用一】 多目标多角度的快速模板匹配算法(基于NCC,效果无限接近Halcon中........)
    【工程应用四】 基于形状的多目标多角度的高速模板匹配算法进一步研究。
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713827.html
Copyright © 2011-2022 走看看