Umgang mit Seitenumbrüchen beim Drucken einer großen HTML-Tabelle

218

Ich habe ein Projekt, das eine HTML-Tabelle mit vielen Zeilen drucken muss.Umgang mit Seitenumbrüchen beim Drucken einer großen HTML-Tabelle

Mein Problem ist die Art, wie die Tabelle über mehrere Seiten gedruckt wird. Es wird manchmal eine Reihe in zwei Hälften schneiden und es unlesbar machen, weil eine Hälfte auf der blutenden Kante einer Seite steht und der Rest oben auf der nächsten Seite gedruckt wird. Die einzige plausible Lösung, die ich mir vorstellen kann, ist die Verwendung von gestapelten DIVs anstatt eines Tisches und erzwingt Seitenumbrüche, wenn nötig. Aber bevor ich die ganze Änderung durchging, dachte ich, ich könnte hier schon mal fragen.

Quelle

2009-11-19 h3.

+21

Auf einer Tangente könnte es sich lohnen, der Tabelle einen '' hinzuzufügen, mit folgendem css' thead {display: table-header-group; } ', um den Tabellenkopf auf allen folgenden Seiten zu drucken (nützlich für lange Datentabellen). –

218

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tbody> 
     <tr> 
      <td>x</td> 
     </tr> 
     <tr> 
      <td>x</td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

Quelle

2009-11-19 14:31:42

Dies funktioniert nicht in allen Browsern. Es scheint in FireFox 3.6 Mac OS zu funktionieren. – daustin777

Leider scheint es nicht –

+14

in FF4 @ W7 arbeitet Dies scheitert auch in WebKit-Browser (zB Safari und Chrome.) –

diese CSS-Eigenschaften verwenden:

page-break-after 

page-break-before

Zum Beispiel:

<html> 
<head> 
<style> 
@media print 
{ 
table {page-break-after:always} 
} 
</style> 
</head> 

<body> 
.... 
</body> 
</html>

via

Quelle

2009-11-19 14:26:00 marcgg

Es funktioniert in Tabellenzeilen? –

Ich bin mir nicht sicher, du musst das überprüfen. Wenn nicht, aufgeteilt in verschiedene Arrays und trennen Sie die Felder durch einen leeren div – marcgg

(oder auf dem „Tisch“ Element) – marcgg

Hinweis: bei Verwendung des page-break-after: immer für den Tag setzen erstellt einen Seitenumbruch nach dem letzten Bit der Tabelle und erstellt am Ende des Tages eine vollständig leere Seite Zeit! Um dies zu beheben, ändern Sie es einfach in page-break-after: auto. Es wird korrekt brechen und keine zusätzliche leere Seite erstellen.

<html> 
<head> 
<style> 
@media print 
{ 
    table { page-break-after:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    td { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
} 
</style> 
</head> 

<body> 
.... 
</body> 
</html>

Quelle

2011-10-14 05:07:46

Vielen Dank! Es ist das einzige, was funktioniert hat! – Maria

Funktioniert für mich auf Chrome und ist eine nette einfache CSS-Lösung. – Ryan

Ausbau von Sinan Unur Lösung:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    div { page-break-inside:avoid; } /* This is the key */ 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

Es scheint, dass page-break-inside: in einigen Browsern vermeiden nur in Betracht für Blockelemente genommen wird, nicht für die Zelle, Tabelle, Zeile weder Inline-Block.

Wenn Sie versuchen, anzuzeigen: Blockieren Sie das TR-Tag und verwenden Sie dort page-break-inside: vermeiden, es funktioniert, aber verwirrt mit Ihrem Tabellenlayout.

Quelle

2013-09-11 14:03:43 vicenteherrera

Hier ist eine einfache Möglichkeit, die divs dynamisch mit jquery hinzuzufügen: '$ (document) .ready (function() {$ ("table tbody th, Tabelle tbody td") wrapInner ("

");.});' –

Danke @ Chrisbloom7, das kann sehr nützlich sein! ;-) – vicenteherrera

Danke an sinan ürün, vicenteherrera und Chrisbloom7. Ich habe die Kombination Ihrer Antworten angewendet und es funktioniert jetzt! –

Keine der Antworten hier funktionierte für mich in Chrome. AAverin auf GitHub hat some useful Javascript for this purpose erstellt und dies ist für mich:

Fügen Sie einfach die js, um Ihren Code und fügen Sie die Klasse ‚splitForPrint‘ auf den Tisch, und es wird die Tabelle in mehreren Seiten und fügen Sie den Tabellenkopf auf jeden ordentlich aufgeteilt Seite.

Quelle

2013-11-15 16:25:21 MDave

Haben Sie eine Probe, wie Sie dies anwenden? Ich habe versucht, meine Tabelle className als "splitForPrint" zuweisen, aber in der JS ist nirgends die Referenz des Elements mit dem Klassennamen 'splitForPrint'. Nur der Teil, wo 'var splitClassName = 'splitForPrint';' aber das ist es. –

Wurde abgelehnt, weil das Skript, mit dem Sie verlinkt sind, das Problem des OP nicht löst, ohne dass Sie sich dabei viel Mühe gegeben haben, und Sie haben keine Beispiele dafür geliefert, wie man das machen könnte. –

funktioniert nicht auf Chrome V39 auf Mac – sirjay

-2

Die akzeptierte Antwort nicht in allen Browsern für mich arbeiten, aber folgende CSS hat bei mir funktioniert:

tr  
{ 
    display: table-row-group; 
    page-break-inside:avoid; 
    page-break-after:auto; 
}

Die HTML-Struktur war:

<table> 
    <thead> 
    <tr></tr> 
    </thead> 
    <tbody> 
    <tr></tr> 
    <tr></tr> 
    ... 
    </tbody> 
</table>

In meinem Fall gab es einige zusätzliche Probleme mit der thead tr, aber dies löste das ursprüngliche Problem, die Tabellenzeilen vor dem Brechen zu halten.

Wegen der Kopf Probleme, landete ich schließlich oben mit:

#theTable td * 
{ 
    page-break-inside:avoid; 
}

dies nicht Reihen verhindern, brechen; nur der Inhalt jeder Zelle.

Quelle

2015-04-01 19:20:14

Ich habe vor kurzem dieses Problem mit einer guten Lösung lösen.

Css:

.avoidBreak { 
    border: 2px solid; 
    page-break-inside:avoid; 
}

Js:

function Print(){ 
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") }); 
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>"); 
    window.print(); 
}

wirkt wie ein Zauber!

Quelle

2015-06-30 15:25:53

Ich überprüfte viele Lösungen und jeder funktionierte nicht gut.

Also habe ich versucht, einen kleinen Trick und es funktioniert:

tfoot mit Stil: position: fixed; bottom: 0px; am unteren Rand der letzten Seite platziert wird, aber wenn Fußzeile zu hoch ist es von Inhalt von Tabelle überlappt.

tfoot mit nur: display: table-footer-group; nicht überlappt wird, ist aber nicht auf der Unterseite der letzten Seite ...

die beiden tfoot Lassen setzen:

TFOOT.placer { 
 
    display: table-footer-group; 
 
    height: 130px; 
 
} 
 

 
TFOOT.contenter { 
 
    display: table-footer-group; 
 
    position: fixed; 
 
    bottom: 0px; \t 
 
    height: 130px; 
 
}

<TFOOT class='placer'> 
 
    <TR> 
 
    <TD> 
 
     <!-- empty here 
 
--> 
 
    </TD> 
 
    </TR> 
 
</TFOOT> \t 
 
<TFOOT class='contenter'> 
 
    <TR> 
 
    <TD> 
 
     your long text or high image here 
 
    </TD> 
 
    </TR> 
 
</TFOOT>

One reserviert Platz auf nichtletzten Seiten, Platziert zweitens in Ihrer Fußzeile.

Quelle

2015-07-28 23:58:08

Ich endete nach @ Vicenteherreras Ansatz, mit einigen Verbesserungen (die möglicherweise Bootstrap 3 spezifisch sind).

Grundsätzlich; Wir können tr s oder td nicht brechen, weil sie keine Elemente auf Blockebene sind. Also betten wir div s in jeden ein und wenden unsere page-break-* Regeln gegen die div an. Zweitens; Wir fügen am oberen Ende jedes dieser divs etwas Polsterung hinzu, um alle Styling-Artefakte zu kompensieren.

<style> 
    @media print { 
     /* avoid cutting tr's in half */ 
     th div, td div { 
      margin-top:-8px; 
      padding-top:8px; 
      page-break-inside:avoid; 
     } 
    } 
</style> 
<script> 
    $(document).ready(function(){ 
     // Wrap each tr and td's content within a div 
     // (todo: add logic so we only do this when printing) 
     $("table tbody th, table tbody td").wrapInner("<div></div>"); 
    }) 
</script>

Die margin und padding Anpassungen waren notwendig, eine Art von Jitter zu kompensieren, die eingeführt wurde (durch meine Vermutung - von Bootstrap). Ich bin mir nicht sicher, ob ich eine neue Lösung aus den anderen Antworten auf diese Frage präsentiere, aber ich denke, das wird vielleicht jemandem helfen.

Quelle

2016-06-22 17:15:32 Aaron

-1

Ich habe alle oben genannten Vorschläge ausprobiert und fand einfache und funktionierende Cross-Browser-Lösung für dieses Problem. Für diese Lösung sind keine Stile oder Seitenumbrüche erforderlich. Für die Lösung sollte das Format der Tabelle wie:

<table> 
    <thead> <!-- there should be <thead> tag--> 
     <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>--> 
    </thead> 
    <tbody><!---<tbody>also must--> 
     <tr> 
      <td>data</td> 
     </tr> 
     <!--100 more rows--> 
    </tbody> 
</table>

Above-Format getestet und arbeitet in Quer Browsern

Quelle

2017-03-13 06:42:30

hat nicht für Chrome (mindestens) funktioniert – AriWais

Nun Jungs ... Die meisten der Lösungen hier oben hat für nicht funktioniert. Das ist also, wie die Dinge für mich gearbeitet ..

HTML

<table> 
    <thead> 
    <tr> 
    <th style="border:none;height:26px;"></th> 
    <th style="border:none;height:26px;"></th> 
    . 
    . 
    </tr> 
    <tr> 
    <th style="border:1px solid black">ABC</th> 
    <th style="border:1px solid black">ABC</th> 
    . 
    . 
    <tr> 
    </thead> 
<tbody> 

    //YOUR CODE 

</tbody> 
</table>

Der erste Satz des Kopfes als Dummy eines verwendet wird, so dass es keine fehlende obere Grenze im zweiten Kopf sein wird (dh original Kopf) während Seitenumbruch.

Quelle

2017-07-06 07:41:53 Aneesh

Umgang mit Seitenumbrüchen beim Drucken einer großen HTML-Tabelle

Antwort

Verwandte Themen