it-swarm.com.de

HTML-Tabelle mit vielen Spalten / Zeilen im CSS-Layout drucken?

Ich möchte eine große Tabelle (so groß, dass ihre Zeilen ca. 3 Blatt breit sind) aus HTML drucken. Wenn möglich, sollte CSS für das Layout ausreichen und die Lösung sollte mit verschiedenen Browsern funktionieren.

Ich definiere derzeit die folgenden Stilregeln:

table { page-break-inside:auto; }
tr    { page-break-inside:auto; }

Wenn ich die DOM-Elemente inspiziere, z. in Firefox 33.0.2 (unter OS X) kann ich sehen, dass die Regeln erkannt werden, aber wenn ich mir dann eine Druckvorschau anschaue ( Datei | Drucken | [~ # ~] pdf [~ # ~] | Öffnen PDF in der Vorschau) Alle Spalten, die nicht auf die erste Seite passen, werden abgeschnitten, dh ich erhalte 1 Seite gedruckte Ausgabe anstelle von 3. Ich habe auch versucht, Internet Explorer 11 und 10 zum gleichen Effekt.

Wie kann ich große HTML-Tabellen (letztendlich sowohl spalten- als auch zeilenweise) für den Ausdruck mit CSS gestalten?

Bonusfrage: Wenn Komponenten im Seitenumbruchstil tatsächlich nur für Elemente auf Blockebene gelten, wie in this der vorherigen Antwort angegeben, wäre es hilfreich, wenn ich meine Tabelle aus div s anstelle von konstruiere td s beim Anstreben der Druckausgabe?

[~ # ~] Update [~ # ~]

Hier ist ein relevantes Beispiel, das ich gerade mit JSFiddle ausprobiert habe. (Ich habe dort kein Konto, daher kann ich bei FWIK keinen direkten Link angeben.)

HTML:

<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>

CSS:

table { page-break-inside:auto; }
td    { border:1px solid lightgray; }
tr    { page-break-inside:auto; }

Wenn ich versuche, diese Tabelle zu drucken (z. B. durch Anwenden von This Frame | Rahmen drucken ... | [~ # ~] pdf [~ # ~] | Öffnen PDF in der Vorschau zu JSFiddles Ergebnis Ansicht in Firefox 33.1 für OS X und für Papierformat/Ausrichtung A4/Hochformat ) Ich bekomme eine Ausgabeseite. Alle Spalten außer der ersten und einem Teil der zweiten werden abgeschnitten.

22
Drux

Sie müssen sich unbedingt von einer Tabelle entfernen, wenn Sie lesbare vertikale Drucke auf der Seite benötigen. Tabellen eignen sich hervorragend für die Anzeige auf der Seite , wenn es sich um Tabellendaten handelt , sind jedoch keine praktikable Lösung für das Drucken, da sie den Fluss nicht berücksichtigen.

Es gibt Plugins (wie dieses hier, keine Zugehörigkeit - nur ein Google-Ergebnis ), die dies automatisch für Sie erledigen, aber hier ist das Beispiel. Wenn Sie dies verwenden, stellen Sie sicher, dass der @media print Richtig aufgelistet ist. Zum lokalen Testen können Sie dies in @media screen Ändern.

Die aufgelisteten @page - Regeln werden nicht angezeigt, sind jedoch über eine Druckvorschau sichtbar.

Hoffe das hilft:

Geige zum Drucken im Hochformat

[~ # ~] html [~ # ~]

<section class="table">
  <div class="row">
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
    <div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
  </div>
</section>

[~ # ~] CSS [~ # ~]

@media print {
    @page {
      margin: 2.5cm;   
    }
    div.row > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.2cm;
    }
    div.row {
      display: block;
    }
}


.table {
    display: table;
    border-spacing: 2px;
}
.row {
    display: table-row;
}
.row > div {
    display: table-cell;
    border: solid 1px #ccc;
    padding: 2px;
}

Bearbeiten - Horizontales Drucken über mehrere Seiten:

Okay, das ist wahrscheinlich ein weitaus seltenerer Anwendungsfall, und wir müssen ein paar alberne Dinge damit machen - also eine faire Warnung. Ich werde versuchen, dies Schritt für Schritt zu erklären, da es kryptisch und widerlich ist.

Geige zum Drucken im Querformat hier!

[~ # ~] CSS [~ # ~]

@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.row > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.row {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .table {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-Origin: bottom left;
        display: block;
    }
}

Dies ist der Teil, auf den es ankommt, da er Ihre Druckanweisungen festlegt. Das meiste davon haben wir im Original gesehen (mit ein paar Verbesserungen, als ich damit gespielt habe).

Der Teil, der uns interessiert, kommt hierher:

 .table {
     transform: translate(8.5in, -100%) rotate(90deg);
     transform-Origin: bottom left;
     display: block;
 }

Was wir tun, ist, das Ganze auf die Seite zu legen und dann dorthin zu schieben, wo wir es erwarten. translate(8.5in, -100%) teilt dem Browser mit - Schieben Sie dieses Element 8,5 Zoll (die Breite eines Standardbriefpapiers in den USA) nach rechts und schieben Sie es dann 100% seiner Höhe nach oben (das Negativ zeigt an, dass es nach oben zeigt) nach unten). Wir schieben ihn nach rechts, sodass er beim Drehen oben auf der Seite angezeigt wird. Wir schieben es in der berechneten Höhe nach oben, damit wir auch beim Drehen keine hässliche Lücke links vom Tisch haben.

Anschließend weisen wir an, dass alle diese Berechnungen in Bezug auf die bottom left Der normalen Position des Elements im Dokumentenfluss ausgeführt werden sollen. Dies verhindert, dass dieser verrückte lange Tisch durch Setzen der Eigenschaft left weit nach rechts gedreht wird. Die bottom -Eigenschaft ist wichtig, da wir sie um eine Vierteldrehung im Uhrzeigersinn drehen. Wenn wir dies von oben tun würden, wäre sie nicht auf der linken Seite. Diese Vierteldrehung wird im nächsten Teil der transform -Anweisung beschrieben: rotate(90deg);

Voila. Das Ding druckt über mehrere Seiten.

Bevor Sie fragen : Nein. Es gibt keine Möglichkeit, den Seitenumbruch in dem Element zu verhindern, in dem ich mich befinde bewusst. Ich weiß, es ist widerlich, hässlich und all dieser Müll, aber wir können nur mit den Werkzeugen arbeiten, die wir bekommen.

Update Firefox bestätigt funktioniert: Firefox 33.1 on Mac

23
Josh Burgess

page-break-inside: auto; Ist der Standardstil. Wenn Sie also keine andere Regel festlegen, werden diese Regeln nichts bewirken.

Wenn Ihre Tabelle nicht auf mehrere Seiten aufgeteilt ist, liegt dies höchstwahrscheinlich an einer anderen Regel, die Sie hinzugefügt haben und die dies verhindert - ich vermute ein overflow: hidden.

Als Erstes sollten Sie alle Stile entfernen und prüfen, ob diese auf mehreren Seiten gedruckt werden. Wenn ja, fügen Sie Ihre Stile wieder hinzu (Regel für Regel oder gegebenenfalls Zeile für Zeile), um das Problem zu finden.

9
RoToRa

Wenn Sie einen Seitenumbruch erzwingen möchten, sollten Sie Seitenumbruch vorher oder verwenden. Seitenumbruch danach. Sie müssen wissen, dass das gestaltete Element ein nicht leeres Element auf Blockebene enthalten sollte und dass es nicht absolut positioniert werden kann. Bei Tabellenelementen ist dies jedoch ziemlich inkonsistent. Was uns zu Ihrer letzten Frage führt: Ja, es wäre konsistenter, Ihre Tabellen mit divs zu erstellen.

In Anbetracht dessen, was Sie erreichen möchten (Drucken großer horizontaler Tabellen), sollten Sie wissen, dass der Versuch, drei Seiten in eine einzupassen, nicht funktioniert, da Ihr Inhalt nicht lesbar ist. Tatsächlich ist es die einzige bewährte Methode, stattdessen ein vertikales Layout zu verwenden (nur für den Druck oder sowohl für das Web als auch für den Druck).

2
Pipo