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
FEHLER 1045 (28000): Zugriff verweigert für Benutzer ''root''@''localhost'' (mit Passwort: JA) Praktische Lösung
Gestern gab es keine Probleme beim Herstellen ein...
Detaillierte Erläuterung des praktischen Protokolls zur Lösung der Netzwerkisolation durch Nginx
brauchen Vor Kurzem mussten wir die Node-Onlinedi...
Wie InnoDB Transaktionsisolationsebenen geschickt implementiert
Vorwort Im vorherigen Artikel „Detaillierte Erklä...
Problem beim Testen des nicht autorisierten Zugriffs auf Zookeeper
Inhaltsverzeichnis Vorwort Erkennen des geöffnete...
Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen
Hintergrund Die Menge neuer Daten in der Geschäft...
Detailliertes Tutorial zur Verwendung von cmake zum Kompilieren und Installieren von MySQL unter Linux
1. Installieren Sie cmake 1. Entpacken Sie das ko...
20 JavaScript-Tipps zur Verbesserung der Entwicklungseffizienz
Inhaltsverzeichnis 1. Arrays deklarieren und init...
Beispiel zur Erläuterung der Größe einer MySQL-Statistiktabelle
Das Zählen der Größe jeder Tabelle in jeder Daten...
Implementierung der Master-Slave-Replikation im Docker Compose-Deployment
Inhaltsverzeichnis Konfigurationsanalyse Dienstle...
Detaillierte Hinweise zu React für Einsteiger
Inhaltsverzeichnis 1. Grundlegendes Verständnis v...
Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter
http://www.cppcns.com/shujuku/mysql/283231.html S...
Über Front-End JavaScript ES6 Details
Inhaltsverzeichnis 1. Einleitung 1.1 Babel-Transc...
Was tun, wenn Sie das Root-Passwort von Mysql5.7 vergessen (einfache und effektive Methode)
Im vorherigen Artikel haben wir vorgestellt, wie ...
Beispiel für die CSS3-Clear-Float-Methode
1. Zweck Durch diesen Artikel kann jeder die Prin...
CentOS7.5-Installationstutorial für MySQL
1. Überprüfen Sie zunächst, ob auf dem System MyS...