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

    本文转载: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=gb2312">
    <title>无标题文档</title>
    <style>
    @media print{
    INPUT {display:none}
    }
    </style>
    </head>

    <body>

    <TABLE border="0" style="font-size:9pt;" width="300px" align="center">
    <THEAD style="display:table-header-group;font-weight:bold">
    <TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</TD></TR>
    </THEAD>
    <TBODY style="text-align:center"">
    <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-after:always;"><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><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;"><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><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    </TBODY>
    <TFOOT style="display:table-footer-group;font-weight:bold">
    <TR>
    <TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">每页都有的表尾</TD>
    </TR>
    </TFOOT>
    </TABLE>
    <input type=button value=" 打 印 " onclick=javascript:window.print()>
    </body>
    </html>

  • 相关阅读:
    在Linux下安装和使用MySQL
    vc动态装载动态库
    stl学习(转帖2)
    makefile
    详细的MySQL C API
    Excel INTO SQLSERVER
    Outlook2010中预览Word,Excel附件问题
    11gRAC ASM管理的数据文件丢失恢复
    ASM上控制文件损坏时的恢复
    使用NET USER增加一个超级管理 & 激活Windows 7 administrator
  • 原文地址:https://www.cnblogs.com/51net/p/3555756.html
Copyright © 2011-2022 走看看