打印时，内容与标题有一块空白内容_html/css

打印时，内容与标题有一块空白内容_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 12:24:35

原創

1502 人瀏覽過

html

<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的话，显示会正常。但我需要类似上述程序这样的操作，要怎么解决这个问题？谢谢

回复讨论(解决方案)

具体那个地方呢，不明白

您把程序复制下来，跑看看就清楚了，我用的是IE8.0测试的。
在打印的时候，第一页的标题和内容之间有很大的一块空白。我知道是page-break-before这个标签放置于tr里导致，但不知道要怎么解决。

就是说去掉.paging{page-break-after :always} 就可以啦？为什么不去掉呢？

哦，理解了在 paging 之后分页。

我查了下page-break-after 这个属性，看到这个：

“注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。”

调试了下，是你html代码的问题

在

这里多了一行 “

” 去掉就ok 了。代码要工整~

调试了下，是你html代码的问题

在

这里多了一行 “

” 去掉就ok 了。代码要工整~

这个不是问题，我是特地要在TABLE-A的一个TD里放置一个TABLE-B的，而换页标签时放在TABLE-B里面，
如果是放在TABLE-A里面是没有问题。但不是我想要的效果，谢谢！

就是说去掉.paging{page-break-after :always} 就可以啦？为什么不去掉呢？

这位兄弟，放置pege-break-after是为了强制换页。我这个测试程序是简化，实际上表内容是很多的，
当行很多时，你就需要强制换页并每个页都要有一个表头。

我不太明白为什么一定要在第一个table 里嵌套另一个table，这样吧，你做3个table head 放在一个table 里，foot 放在一个table里，中间的分页内容放在一个table 里，三个并列的table 也可以避免这个空白的问题。

我不太明白为什么一定要在第一个table 里嵌套另一个table，这样吧，你做3个table head 放在一个table 里，foot 放在一个table里，中间的分页内容放在一个table 里，三个并列的table 也可以避免这个空白的问题。

是这样的，我做了一个固定表头的TABLE，其分布就是
TABLE A
   TR
     TABLE B
         放置标题
     /TABLE
   /TR
   TR

      TABLE C
        这里就是放置表格内容的，我的分页标签也是在这里放置
      /TALBE

/TR
/TABLE
我刚刚测试发现：如果只有两页的话，第二页行数越多，第一页标题离内容的空白间隙就越大，即TABLE B离TABLE C的间隙就越大，很奇怪的效果……！

假设只有两页的情况下，初步判断空白的距离=下一页的行数×行高，直至该页排版填充满，如
page1

TITLE1 TITLE2
空行1
空行2
value1  value2

page2
TITLE1  TITLE2
value1  value2
value1  value2