Home >Web Front-end >HTML Tutorial >When printing, there is a blank space between the content and title_html/css_WEB-ITnose
When printing, there is a blank space between the content and title_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:24:351499browse
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> 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 0b7bca49fbb63ae1ff5ab1a63dc5bddf
a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c< ;table>
There is an extra line here " a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cf5d188ed2c074f8b944552db028f98a1" It will be ok if you remove it. The code must be neat~
After debugging, it is the problem with your html code
in 0b7bca49fbb63ae1ff5ab1a63dc5bddf
a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cf5d188ed2c074f8b944552db028f98a1
There is an extra line here “a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cf5d188ed2c074f8b944552db028f98a1” 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.
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.
That’s it, I made a TABLE with a fixed header, and its distribution is
TABLE A
TR
TABLE B
Place the title
/TABLE
/TR
TR
d2d2b210a5407ac94e29e6630a41a1bc
TABLE C
This is where the table content is placed, and my paging tags are also placed here
/TALBE
c997cec9f4b83324a7145373fde865ba
/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