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>

  • 相关阅读:
    1.在html中引入js文件和Jquery框架
    在html页面添加一个隐藏域,并渲染一个需要保存的数值,在js中需要再获取,而不影响页面结构
    Django REST framework 使用简记
    BlockingQueue-线程的阻塞队列
    ExecutorService生命周期
    Java transient关键字使用小记
    数组
    Git 常用命令
    Git 常见报错
    python 常见报错
  • 原文地址:https://www.cnblogs.com/51net/p/3555756.html
Copyright © 2011-2022 走看看