webentwicklung-frage-antwort-db.com.de

Skalieren Sie die HTML-Tabelle vor dem Drucken mit CSS

Ich habe eine Tabelle als den gesamten Inhalt eines HTML-Dokuments (für legitime Tabellenzwecke ... es sind Tabellendaten, nicht für das Layout). Einige Zellen haben angegebene Breiten und Höhen (nicht durch CSS, sondern unter Verwendung der alten Größenangabe in einer Tabellenstruktur), aber die Gesamttabelle hat keine angegebene Breite oder Höhe. Dies ist eine relativ große Tabelle, die jedoch bei korrekter Skalierung (ca. 70%) so gedruckt werden kann, dass sie gut auf ein einzelnes Blatt Papier passt. Dies kann mit dem scale page Funktion innerhalb der Druckereinstellungen von IE, Firefox und Chrome. Gibt es eine Möglichkeit, die gesamte Seite (in meinem Fall nur diese Tabelle) als Teil eines Druck-Stylesheets zu skalieren (ich weiß über @media print {} aber die dortigen Aussagen werden ignoriert ... liegt das Problem bei den richtigen Befehlen für die Skalierung, nicht beim Einrichten der Druck-CSS)? Ich kann die Bildschirmansicht folgendermaßen skalieren:

body {
   transform: scale(.7);
}

Chrome (und andere)) ignorieren jedoch beim Drucken meinen Maßstab und skalieren die Tabelle automatisch, um sie an die Breite des Papiers anzupassen, was dazu führt, dass meine Tabelle auf eine zweite Seite aufgeteilt wird. Ich habe versucht, sie anzuwenden auch dies ohne erfolg:

table {page-break-inside: avoid;}
20
techtheatre

Am Ende habe ich die gesamte Tabelle mit Prozentgrößen als Klassen neu geschrieben und konnte dann die Seite für den Druck skalieren. Ich bin mir nicht sicher, warum der Browser meine Druckstile in Bezug auf die Transformation ignoriert hat, aber das Konvertieren der Tabelle von festen Größen in proportionale Größen hat es mir ermöglicht, sie mit CSS zu skalieren, und das Problem ist behoben.

9
techtheatre

Sie sollten die Medientypen verwenden

@media print {
    body {transform: scale(.7);}
    table {page-break-inside: avoid;}
}

Daher werden diese Stile nur im Druckvorschau-Modus angewendet. http://www.w3.org/TR/CSS21/media.html

14
Dmitry

Ich weiß, dass ich die Toten auferwecke, aber für zukünftige Suchergebnisse:

Ich hatte ein Problem mit sehr breiten Tabellen, bei dem alle Browser die Höhe falsch berechnet haben und den Vorgang mehrmals auf einzelnen Seiten wiederholt haben. Meine Lösung bestand darin, Zoom anzuwenden: 80% auf den Körper (% variiert je nach Ihren Anforderungen), was erzwang Unsere Seite, um effektiv für den Druck und den Kopf zu passen, wurde dann am oberen Rand jeder Seite richtig wiederholt. Vielleicht funktioniert Zoomen, wenn Transformieren nicht funktioniert hat.

7
TerraElise