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

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:24 PM

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles