每页都有的表头和打印分页

本文转自: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>
posted @ 2015-12-12 17:44  网事  阅读(621)  评论(0编辑  收藏  举报