When printing, there is a blank space between the content and title_html/css

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>

Copy after login

Please tell me, when I place the pagination tag like this, the print preview will produce a blank block. Why is this? , if it is table content and no
TABLE is set, the display will be normal. But I need operations similar to the above program. How can I solve this problem? Thank you

Reply to the discussion (solution)

I don’t understand the specific place

You can copy the program and run it and it will be clear. I use It was tested with IE8.0.
When printing, there is a large blank space between the title and the content on the first page. I know it's caused by the page-break-before tag being placed in tr, but I don't know how to solve it.

In other words, just remove .paging{page-break-after :always} ? Why not remove it?

Oh, I understand paging after paging.

I checked the page-break-after attribute and saw this:

"Note: Please use the page-break attribute as little as possible, and avoid using it in tables, floating elements, with Use the paging attribute in the block element of the border. "

After debugging, it is the problem with your html code

in
< ;table>

There is an extra line here "

" It will be ok if you remove it. The code must be neat~

After debugging, it is the problem with your html code

in

There is an extra line here “

” It will be ok if you remove it. The code must be neat~

This is not a problem. I specifically want to place a TABLE-B in a TD of TABLE-A, and put the page change label in TABLE-B.
If so There is no problem if you put it in TABLE-A. But it's not the effect I want, thank you!

In other words, just remove .paging{page-break-after :always} ? Why not remove it?

This brother, the purpose of placing pege-break-after is to force page change. My test program is simplified. In fact, the table contains a lot of content.
When there are many rows, you need to force a page change and each page must have a table header.

I don’t quite understand why it is necessary to nest another table in the first table. Let’s do this. You make 3 tables and put the head in one table, the foot in one table, and the pagination in the middle. The content is placed in a table, and three parallel tables can also avoid this blank problem.

TABLE C
This is where the table content is placed, and my paging tags are also placed here
/TALBE

/TR
/TABLE
I just tested and found: If there are only two pages, the more rows on the second page, the larger the gap between the title of the first page and the content, that is, TABLE B is far away from TABLE C The bigger the gap is, the weird effect...!

Assuming that there are only two pages, the initial distance of the blank = the number of lines on the next page
Blank line 1
Blank line 2
value1 value2

page2
TITLE1 TITLE2
value1 value2
value1 value2

Related labels：

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

source：php.cn

Previous article：div1 div2 How to position div2 to the lower right corner of div1_html/css_WEB-ITnose Next article：I would like to ask: Can the overflow:visible attribute of textarea under FF be replaced_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

When printing, there is a blank space between the content and title_html/css_WEB-ITnose

Reply to the discussion (solution)