首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

打印时,内容与题目有一块空白内容

2013-11-14 
打印时,内容与标题有一块空白内容HTMLHEADTITLE AJava.org书城订单明细/TITLEstyle@media print

打印时,内容与标题有一块空白内容


<HTML>   
 <HEAD>   
  <TITLE> AJava.org书城订单明细</TITLE>   
  <style>   
  @media print{    
  .toolbar{display:none;}    
  }    
  .toolbar{border:1px solid #6A9BFA;background:#E8F7E8;}    
  .paging{page-break-after :always}    
  td{font-size:12px;color:#000000;}    
  </style>   
 </HEAD>   
   
 <BODY>   
 <div class='toolbar'>   
 <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>   
 </OBJECT>   
 <input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>   
 <input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>   
 <input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>   
 <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>   
 </div>   
 <TABLE width="100%" border="0">
<THEAD style="display:table-header-group;font-weight:bold">

  <TR>   
      <TD>书名</TD>   
      <TD>价格</TD>   
      <TD>送货地址</TD>   
      <TD>送货时间</TD>   
      <TD>状态</TD>   
    </TR>   
</THEAD>  
  <tr><td><table>
   <TR>   
    <TD>《Java 编程思想》</TD>   
    <TD>¥60.00</TD>   
    <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
    <TD>2009-8-8</TD>   
    <TD>已送达</TD>   
   </TR>   
   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR class='paging'>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR >   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   


   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>   
   <TR>   
     <TD>《Java 编程思想》</TD>   
     <TD>¥60.00</TD>   
     <TD><B>伊拉克巴格达总统府9栋8单元7门654室</B></TD>   
     <TD>2009-8-8</TD>   
     <TD>已送达</TD>   
   </TR>  
   </td></table></tr>
  <TFOOT style="display:table-footer-group;font-weight:bold">   
<TR>   
<TD colspan="5"  align="left" >以上内容纯属虚构</TD>   
</TR>   
</TFOOT>   
</TABLE>   
</BODY>   
</HTML>   


请问下,当我分页标签这样放时,打印预览会产生空白块,这是为什么?,若是表内容,不再设置一个
TABLE的话,显示会正常。但我需要类似上述程序这样的操作,要怎么解决这个问题?谢谢 html
[解决办法]
哦,理解了在 paging 之后分页。

我查了下page-break-after 这个属性,看到这个:

“注释:请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。”
[解决办法]
调试了下,是你html代码的问题

在 </THEAD>  
  <tr><td><table>

这里多了一行  “ <tr><td><table>”  去掉就ok 了。代码要工整~
[解决办法]
我不太明白为什么一定要在第一个table 里嵌套另一个table,这样吧,你做3个table head 放在一个table 里,foot 放在一个table里,中间的分页内容放在一个table 里,三个并列的table 也可以避免这个空白的问题。

热点排行