CSS控制打印 - 分页

最新推荐文章于 2023-03-24 08:58:56 发布

kofkyo

最新推荐文章于 2023-03-24 08:58:56 发布

阅读量778

点赞数

分类专栏： web相关文章标签： css 浏览器 input button null border

web相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

代码：

/* from: http://hi.baidu.com/nomady/blog/item/00da853d54ed1a01baa16734.html */

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>每页都有的表头</title> </head> <body> <mce:style></mce:style><style mce_bogus="1"> @media print{INPUT {display:none}}</style> <TABLE border="0" style="font-size:9pt;" mce_style="font-size:9pt;" width="300px" align="center"> <THEAD style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold"> <TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red" mce_style="font-weight:bold;border:3px double red">每页都有的表头</TD></TR> </THEAD> <TBODY style="text-align:center" mce_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;" mce_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;" mce_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;" mce_style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR> </TBODY> <TFOOT style="display:table-footer-group;font-weight:bold" mce_style="display:table-footer-group;font-weight:bold"> <TR> <TD colspan="2" align="center" style="font-weight:bold;border:3px double blue" mce_style="font-weight:bold;border:3px double blue">每页都有的表尾</TD> </TR> </TFOOT> </TABLE> <input type=button value=" 打印 " οnclick="window.print()"> </body> </html>

关于page-break-after

语法：

取值：

auto	:	假如需要在对象之后插入页分割符
always	:	始终在对象之后插入页分割符
avoid	:	未支持。避免在对象后面插入页分割符
left	:	未支持。在对象后面插入页分割符直到它到达一个空白的左页边
right	:	未支持。在对象后面插入页分割符直到它到达一个空白的右页边
null	:	空白字符串。取消页分割符设置

说明：

检索或设置对象后出现的页分割符。
此属性在打印文档时发生作用。此属性不作用于 BR 或 HR 对象。
假如在浏览器已显示的对象上此属性和 page-break-before 属性的值之间发生冲突，则导致最大数目分页的值被使用。
页分隔符不允许出现在定位对象内部。
在IE6及之前版本浏览器中， left 和 right 值的作用结果等同于 always 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 pageBreakAfter 。

此外还有page-break-before和page-break-inside