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 levelMunicipal 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
@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">
Street |
Title |
Entry date |
National level |
Municipal level td>
|
People's Daily |
Liberation Daily | Xinmin Evening News |
>Pusan Street, Pudong New District |
Test |
02-24-2009 |
| √ |
√ |
Pusan Street, Pudong New District |
sseref |
02-24-2009 |
|
|
|
="center">
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 |
|
| /tr>
Pusan Street, Pudong New District |
sdsedjiik |
< td>02-24-2009
|
|
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!
Statement: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