在做项目的时候碰到的。用户要求,页面呈现太长时,打印的时候,要求,每页上都要有表头。找了好久,才在网上找到。原来,是要对每个表格,定义其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=" 打 印 " οnclick=javascript:window.print()> </body> </html>
|
转载于:https://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html