Home > Web Front-end > HTML Tutorial > Web paging printing thin line form ultimate strategy for paging printing_HTML/Xhtml_web page production

Web paging printing thin line form ultimate strategy for paging printing_HTML/Xhtml_web page production

WBOY
Release: 2016-05-16 16:44:06
Original
1535 people have browsed it

When I was printing for a client recently, the client suggested not to print the header of the page when printing, but only print the content inside the form, because the header has a background and a print button, and it needs to be a thin-line form. I think thin-line forms are not Is it very simple?
If you still don’t know how to make a thin line table, please see the code below to achieve the effect:)








< td colspan=2>National level






Municipal level
People's Daily Liberation Daily Xinmin Evening News


Then I set IE to print the background, and I thought I was done.
When the result is printed and previewed, there is a big black block in the head. Why? Because there is a background inside my head, and the result occupies the page!
.gTitle
{
width:100%;
height:32px;
line-height:32px;
background-image:url(images/gtitle.gif);
padding-left:130px;
margin-bottom:10px;
}
I started to feel depressed. I searched online for a long time but couldn’t find a perfect solution, so I decided to do it myself.
After thinking about it for a long time, I finally got it:)
Css is defined as follows:
noneprint: style definition hidden when printing
tabPrint: thin line table style definition to be printed
nextPate: paging Style definition
linetd: Haha, the most important thing here is to make your form perfect when printing

Copy code
The code is as follows:

@media print {
.noneprint{display:none;}
}
.tabPrint td
{
border-left:# 000000 solid 1px;
border-top:#000000 solid 1px;
height:21px; 🎜>border-bottom:#000000 solid 1px;
}
.nextPage
{
page-break-after:always;
}
.linetd
{
border-bottom:solid 1px #000;
}


页面HTML如下:
记得在thead加上style="display:table-header-group;font-weight:bold",这样每个页面才会有都表头哟

>>首页>>门户>>信息管理











标题: 所属街道: 录入日期: --



ID="Table2">











>













="center">











🎜>




;





/tr>



< td>02-24-2009







🎜>
Street Title Entry date National level Municipal level
People's Daily Liberation DailyXinmin Evening News
Pusan ​​Street, Pudong New District Test 02-24-2009
Pusan ​​Street, Pudong New District sseref 02-24-2009
Pusan ​​Street, Pudong New District sseref 02-24-2009 tr align="center" class='nextPage'>
Page 1
Pusan ​​Street, Pudong New District sdsedjiik 02-24- 2009
Pusan ​​Street, Pudong New District sdsedjiik 02- 24-2009
Pusan ​​Street, Pudong New District sdsedjiik 02-24-2009
Pusan ​​Street, Pudong New District sdsedjiik
Pusan ​​Street, Pudong New District sdsedjiik 02-24-2009

Haha, you have to look carefully at the place marked in red, it depends on it!
Related labels:
web
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template