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
Tutorial zur Ein-Klick-Installation von Docker und Docker-Compose (unterstützt online und offline)
Shell-Skript #!/bin/sh # Aktuelles Verzeichnis CU...
So erstellen, starten und stoppen Sie einen Docker-Container
1. Ein Container ist eine unabhängig laufende Anw...
Einführung in lokale Komponenten in Vue
In Vue können wir lokale Komponenten selbst defin...
Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators
Inhaltsverzeichnis Überblick Objektrestattribut E...
So verwenden Sie eine VLAN-getaggte Ethernet-Karte im CentOS/RHEL-System
In einigen Szenarien möchten wir derselben Ethern...
Spezifische Verwendung der MySQL-Segmentierungsfunktion substring()
Es gibt vier wichtige MySQL-Zeichenfolgenabfangfu...
SQL-Gruppierung zum Entfernen von Duplikaten und Sortieren nach anderen Feldern
brauchen: Identische Elemente eines Feldes zusamm...
Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS
Normalerweise haben wir ein Scan-Feld, wenn wir d...
jQuery implementiert Formularvalidierungsfunktion
Beispiel für die Validierung eines jQuery-Formula...
Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue
Vorwort Heutzutage wird in Projekten häufig die A...
Sehr praktische Methode zur Implementierung des Tomcat-Startskripts
Vorwort Es gibt ein Szenario, in dem das Unterneh...
Detaillierte Erklärung der JS-Homologiestrategie und CSRF
Inhaltsverzeichnis Überblick Same-Origin-Policy (...
Lösung für mehrere Docker-Container, die nicht die gleiche Portnummer haben
Hintergrund In Docker werden vier Container mit d...
So verwenden Sie boost.python, um die dynamische C++-Bibliothek unter Linux aufzurufen
Vorwort Vor Kurzem habe ich begonnen, Robot Frame...
Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen
Vorwort: In MySQL wird die Funktion CONCAT() verw...