Maison > interface Web > tutoriel HTML > Impression de pagination Web en ligne fine, stratégie ultime pour l'impression de pagination_HTML/Xhtml_production de pages Web

Impression de pagination Web en ligne fine, stratégie ultime pour l'impression de pagination_HTML/Xhtml_production de pages Web

WBOY
Libérer: 2016-05-16 16:44:06
original
1537 Les gens l'ont consulté

Lorsque j'imprimais récemment pour un client, celui-ci m'a suggéré de ne pas imprimer l'en-tête de la page lors de l'impression, mais uniquement d'imprimer le contenu à l'intérieur du formulaire, car l'en-tête a un arrière-plan et un bouton d'impression, et il doit être fin. -forme en ligne. Je pense que les formes en lignes fines ne le sont pas. Est-ce très simple ?
Si vous ne savez toujours pas comment créer un tableau en lignes fines, veuillez consulter le code ci-dessous pour obtenir l'effet :)
<. ;table cellSpacing=0 cellPadding=0 border=0>


>
tr>

;Nouvelles du soir Xinmin

Niveau nationalNiveau municipal
Quotidien du Peuple

Ensuite, j'ai configuré IE pour imprimer l'arrière-plan, et je pensais avoir terminé
Lorsque le résultat est imprimé et prévisualisé, il y a un gros bloc noir dans la tête. Pourquoi Parce qu'il y a un arrière-plan dans ma tête, et ? le résultat occupe la page !
.gTitle
{
width:100%;
hauteur:32px
hauteur de la ligne:32px
background-image:url(images/gtitle.gif); 🎜>padding-left:130px;
margin-bottom:10px;
}
J'ai commencé à me sentir déprimée. J'ai cherché en ligne pendant longtemps mais je n'ai pas trouvé de solution parfaite, alors j'ai décidé de le faire. fais-le moi-même.
Après y avoir longuement réfléchi, j'ai finalement compris :)
Le CSS est défini comme suit :
noneprint : définition de style masquée à l'impression
tabPrint : définition de style de tableau en lignes fines à imprimer
nextPate : définition du style de pagination
linetd : Haha, la chose la plus importante ici est de rendre votre formulaire parfait lors de l'impression





Copier le code


Le code est le suivant :
@media print { .noneprint{display:none;} } .tabPrint td {
border-left:# 000000 solid 1px;
border-top:#000000 solid 1px;
hauteur: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"> > ">





Xinmin Evening News

> ;Test

>


;

/td>

="centre">

tr>

;td>02-24- 2009
>

td>
;/td> /tr>

;
;tr align="center">

-2009

Haha, il faut bien regarder l'endroit marqué en rouge, ça dépend !

Étiquettes associées:
web
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
Rue Titre Date d'entrée Niveau national ;/tr>
Quotidien du Peuple
Rue Pusan, nouveau district de Pudong 24-02-2009
Rue Pusan, nouveau district de Pudongsseref 24-02-2009
sseref 24-02-2009
tr align="center" class='nextPage'>
Page 1
Rue Pusan, nouveau district de Pudong Rue Pusan, nouveau district de Pudong sdsedjiik 02-24-2009 Rue Pusan, nouveau district de Pudong
sdsedjiik
Rue Pusan, nouveau district de Pudong24-02-2009Rue Pusan, nouveau district de Pudong sdsedjiik