communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

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
1514 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
Article précédent：Analyse complète des unités d'éléments de page Web_HTML/Xhtml_Production de pages Web Article suivant：Apprendre le lien hypertexte vers la production d'une page Markup_HTML/Xhtml_Web
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
Derniers articles par auteur
Derniers numéros
Lancez un navigateur transparent pour améliorer l'expérience des applications Web et des PWA [prend en charge HTML, CSS et JavaScript statiques] [permet aux utilisateurs d'afficher les fonds d'écran de nos applications Web/PWA] Je suis un développeur et concepteur front-end junior développant actuellement une applica...
Depuis 2024-04-05 13:50:12
0
1
1367
Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...
Depuis 2024-04-05 08:45:39
0
1
3443
Utiliser des bibliothèques installées localement dans les pages du site Web Est-il possible d'utiliser des bibliothèques (.dll, .ocx) écrites pour les systèmes d'expl...
Depuis 2024-04-05 00:15:49
0
1
3563
Comment écouter des événements de clic spécifiques mais en supprimer d'autres ? Mon application Web contient un tableau HTML dans lequel chaque ligne renvoie à une URL sp...
Depuis 2024-04-04 16:55:27
0
1
317
Javascript - Les tests unitaires Mocha Chai ne fonctionnent pas Je travaille sur un projet avec le bootcamp du cours Front End Web Development et malheure...
Depuis 2024-04-02 14:52:19
0
1
356
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
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