Dünne Linientabelle zum Drucken von Webseiten + ultimative Strategie zum Drucken von Seiten
|
Als ich kürzlich für einen Kunden druckte, bat er mich, nicht die Kopfzeile der Seite, sondern nur den Inhalt der Tabelle zu drucken, da die Kopfzeile einen Hintergrund und eine Druckschaltfläche hat und es sich um eine Tabelle mit dünnen Linien handeln muss. Ich denke, das ist sehr einfach. Wenn Sie immer noch nicht wissen, wie man eine Tabelle mit dünnen Linien erstellt, sehen Sie sich bitte den folgenden Code an, um den Effekt zu erzielen:) <Tabelle cellSpacing=0 cellPadding=0 border=0> <tr> <td bgcolor='schwarz'> <Tabelle cellSpacing=1 cellPadding=1 border=0> <tr align=center bgcolor='#ffffff'> <td colspan=2>Nationale Ebene</td><td colspan=1>Kommunale Ebene</td> </tr> <tr bgcolor='#ffffff' align=center> <td>Volkszeitung</td> <td>Tageszeitung „Befreiung“</td> <td>Xinmin-Abendnachrichten</td> </tr> </Tabelle> </td> </tr> </Tabelle> Dann habe ich den IE so eingestellt, dass er im Hintergrund druckt. Ich dachte, das wäre erledigt, aber als ich gedruckt und die Vorschau angezeigt habe, war in der Kopfzeile ein großer schwarzer Block. Warum? Weil die Kopfzeile einen Hintergrund hatte, der die ganze Seite einnahm! .gTitel { Breite: 100 %; Höhe: 32px; Zeilenhöhe: 32px; Hintergrundbild:URL(Bilder/gtitle.gif); Polsterung links: 130px; Rand unten: 10px; } Ich begann, mich deprimiert zu fühlen. Ich suchte lange im Internet, konnte aber keine perfekte Lösung finden, also beschloss ich, es selbst zu tun. Nachdem ich lange darüber nachgedacht habe, habe ich es endlich herausgefunden :) Die CSS-Definition lautet wie folgt: noneprint: Stildefinition beim Drucken ausgeblendet tabPrint: Zu druckende Definition des Tabellenstils mit dünnen Linien nextPate: Definition des Paginierungsstils linetd: Haha, das ist das Wichtigste, damit Ihr Formular perfekt ausgedruckt wird Code kopieren Der Code lautet wie folgt:@media drucken { .noneprint{display:none;} } .tabPrint td { Rahmen links: #000000 durchgezogen 1px; Rahmen oben: #000000 durchgezogen 1px; Höhe: 21px; } table.tabDrucken { Rahmen rechts: #000000 durchgezogen 1px; Rahmen unten: #000000 durchgezogen 1px; } .nächsteSeite { Seitenumbruch nach: immer; } .linetd { Rahmen unten: durchgezogen 1px #000; } Der HTML-Code der Seite lautet wie folgt: Denken Sie daran, style="display:table-header-group;font-weight:bold" zum thead hinzuzufügen, damit jede Seite eine Kopfzeile hat. <div Klasse="keinDrucken"> <div class="gTitle">>><A href="../Default.aspx" mce_href="Default.aspx">Home</A>>><A href="Default.aspx" mce_href="Default.aspx">Portal</A>>>Informationsmanagement</div> <table cellSpacing="0" cellPadding="2" width="100%" align="center" border="0" ID="Tabelle1"> <tr> Titel: <td><input name="txtFName" type="text" id="txtFName" style="width:150px;" /></td> <td align="right">Straße:</td> <td><wählen Sie Name="ddlStreet" ID="ddlStreet"> <option selected="selected" value="">-Bitte wählen Sie den Status-</option> </Auswählen></td> <td align="right">Eintragsdatum:</td> <td colSpan="3"><input name="sDate" type="text" id="sDate" onclick="setday(this)" style="width:80px;" />-- <input name="eDate" type="text" id="eDate" onclick="setday(this)" style="width:80px;" /></td> <td><input type="senden" name="btnSearch" value="Abfrage" id="btnSearch" class="Schaltfläche" /> <input type="button" onclick="window.print()" value="Drucken" class="Button" ID="Button1" NAME="Button1"></td> </tr> </Tabelle> </div> <table class='tabPrint' align="center" width="95%" cellSpacing="0" cellPadding="0" border="0" ID="Tabelle2"> <thead style="Anzeige:Tabellenkopfzeilengruppe;Schriftstärke:fett" mce_style="Anzeige:Tabellenkopfzeilengruppe;Schriftstärke:fett"> <tr align="center"> <td rowspan="2">Straße</td> <td rowspan="2">Titel</td> <td rowspan="2">Eintrittsdatum</td> <td colspan="2">National</td> <td colspan="1">Kommunale Ebene</td> </tr> <tr align="center"> <td>Volkszeitung</td> <td>Tageszeitung „Befreiung“</td> <td>Xinmin-Abendnachrichten</td> </tr> </thead><tbody> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>Prüfung</td> <td>24.02.2009</td> <td>√</td> <td>√</td> <td>√</td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sseref</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sseref</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center" Klasse='nächsteSeite'> <td colspan="6" class='linetd'>Seite 1</td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sdsedjiik</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sdsedjiik</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sdsedjiik</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sdsedjiik</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong Neues Gebiet Pusan Straße</td> <td>sdsedjiik</td> <td>24.02.2009</td> <td> </td> <td> </td> <td> </td> </tr> </tbody></table> Haha, bei den rot markierten Stellen muss man genau hinschauen, da hängt die Perfektion ganz von ihnen ab! |
<<: 4 Möglichkeiten, doppeltes Einfügen von Daten in Mysql zu vermeiden
Artikel empfehlen
Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache
Inhaltsverzeichnis 1. Vorbereitung vor der Entwic...
So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung
Unter Linux ist alles eine Datei, daher besteht d...
Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04
Dieser Artikel installiert die Google-Eingabemeth...
Vue implementiert Paging-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
SQL-Gruppierung zum Entfernen von Duplikaten und Sortieren nach anderen Feldern
brauchen: Identische Elemente eines Feldes zusamm...
Neue Funktionen in MySQL 8.0 - Einführung in Check Constraints
Inhaltsverzeichnis Vorwort Einschränkungen prüfen...
Die Grundprinzipien und die detaillierte Verwendung des Ansichtsfensters
1. Übersicht über das Ansichtsfenster Mobile Brow...
Detaillierte Erläuterung des Speichermodells der JVM-Serie
Inhaltsverzeichnis 1. Speichermodell und Laufzeit...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten
In diesem Artikel werden hauptsächlich drei Metho...
Der Nginx-Reverseproxy leitet Anfragen von Port 80 an 8080 weiter.
Lassen Sie uns zunächst eine Reihe von Konzepten ...
Die Hintergrundfarbe oder das Bild im Div-Container wächst mit dem Wachstum
Code kopieren Der Code lautet wie folgt: Höhe: au...
Tutorial zum Herunterladen, Installieren und Bereitstellen von Tomcat für IDEA (mit zwei Hot-Deployment-Einstellungsmethoden für IDEA)
Inhaltsverzeichnis Tomcat-Download-Tutorial Tutor...
Vue implementiert Baumtabelle
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung des MySQL-Triggerbeispiels
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...