我正在使用print css来隐藏某些元素,并在我不需要它时停止分页符.用户可以选择在打印之前隐藏部分.
我的问题是,当我打印预览时,总会有一个额外的空白页面(最后在Chrome和Firefox中,在Opera的开头),我无法弄清楚原因. IE没有问题,没有额外的页面(这是令人震惊的…)
我非常感谢一些意见.我试过制作容器div page-break-after:avoid;和page-break-after:auto;但都没有奏效.同时取出table.plain {page-break-inside:avoid;没有什么区别.
当用户单击隐藏图标时,exclude类将添加到表中.这有效,并且带有排除类的任何内容都不会显示在打印中.用户想要打印的最后一页可能适合一页或不适合.
这是我的HTML:
<body> <div id="main"> <div id="content"> <div id="side" class="exclude"> ...logo,etc,shown at side on screen... </div> <div id="data"> <table class="printOnly plain printHeader"> ...logo,to print at top... </table> <div> <table class="detail plain"> <tbody> <tr> <td class="rel"> <div class="abs exclude visibility"> <a href="#" class="show ico-show ico hid">Show</a> <a href="#" class="hide ico-hide ico">Hide</a> </div> <h3>Contact</h3> </td> </tr> ...more tr with contact details... </tbody> </table> ...more tables with other details... </div> </div> //data </div> //content </div> //main </body>
这是我的打印css:
@media print { .exclude { display: none !important; } .printOnly { display:block !important; } div#data,div#data div { width: 98% !important; border: none !important; } table.plain { page-break-inside:avoid; } }
非常感谢您的帮助:)