Ich habe eine dynamische Tabelle auf meiner Webseite, die manchmal viele Zeilen enthält. Ich weiß , es gibt page-break-before
und page-break-after
CSS - Eigenschaften. Wo füge ich sie in meinen Code ein, um bei Bedarf das Brechen von Seiten zu erzwingen?
html
css
printing
css-tables
page-break
Mohammad Saberi
quelle
quelle
Wo immer Sie eine Pause einlegen möchten, entweder a
table
odertr
, müssen Sie eine Klasse zum Beispiel geben.page-break
mit CSS wie unten erwähnt:/* class works for table row */ table tr.page-break{ page-break-after:always } <tr class="page-break"> /* class works for table */ table.page-break{ page-break-after:always } <table class="page-break">
und es wird funktionieren, wie Sie es benötigen
Alternativ können Sie auch eine
div
Struktur für dieselbe haben:CSS:
@media all { .page-break { display: none; } } @media print { .page-break { display: block; page-break-before: always; } }
Div:
<div class="page-break"></div>
quelle
tr
In Chrome v64 konnte die Unterbrechung auch nicht funktionieren.Ich habe mich nach einer Lösung dafür umgesehen. Ich habe eine mobile jquery-Site, die eine endgültige Druckseite enthält und Dutzende von Seiten kombiniert. Ich habe alle oben genannten Korrekturen ausprobiert, aber das einzige, was ich zur Arbeit bringen konnte, ist Folgendes:
<div style="clear:both!important;"/></div> <div style="page-break-after:always"></div> <div style="clear:both!important;"/> </div>
quelle
Leider haben die obigen Beispiele in Chrome bei mir nicht funktioniert.
Ich habe die folgende Lösung gefunden, bei der Sie die maximale Höhe in PXs jeder Seite angeben können. Dadurch wird die Tabelle in separate Tabellen aufgeteilt, wenn die Zeilen dieser Höhe entsprechen.
$(document).ready(function(){ var MaxHeight = 200; var RunningHeight = 0; var PageNo = 1; $('table.splitForPrint>tbody>tr').each(function () { if (RunningHeight + $(this).height() > MaxHeight) { RunningHeight = 0; PageNo += 1; } RunningHeight += $(this).height(); $(this).attr("data-page-no", PageNo); }); for(i = 1; i <= PageNo; i++){ $('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>"); var rows = $('table tr[data-page-no="' + i + '"]'); $('#Table' + i).find("tbody").append(rows); } $('table.splitForPrint').remove(); });
Sie benötigen außerdem Folgendes in Ihrem Stylesheet
div.tablePage { page-break-inside:avoid; page-break-after:always; }
quelle
das funktioniert bei mir:
<td> <div class="avoid"> Cell content. </div> </td> ... <style type="text/css"> .avoid { page-break-inside: avoid !important; margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */ } </style>
Aus diesem Thread: Vermeiden Sie Seitenumbrüche in der Tabellenzeile
quelle
Wenn Sie wissen, wie viele Sie auf einer Seite haben möchten, können Sie dies jederzeit tun. Nach jedem 20. Eintrag wird eine neue Seite gestartet.
.row-item:nth-child(20n) { page-break-after: always; page-break-inside: avoid; }
quelle
Irgendwann wurde mir klar, dass mein Masseninhalt, der über den Tisch lief und nicht richtig brach, einfach nicht einmal in einem Tisch sein musste.
Es ist zwar keine technische Lösung, aber es hat mein Problem gelöst, die Tabelle einfach zu beenden, wenn ich keine Tabelle mehr benötige. dann startete eine neue für die Fußzeile.
Hoffe es hilft jemandem ... viel Glück!
quelle
Hier ist ein Beispiel:
Über CSS:
<style> .my-table { page-break-before: always; page-break-after: always; } .my-table tr { page-break-inside: avoid; } </style>
oder direkt auf dem Element:
<table style="page-break-before: always; page-break-after: always;"> <tr style="page-break-inside: avoid;"> .. </tr> </table>
quelle
Du solltest benutzen
<tbody> <tr> first page content here </tr> <tr> .. </tr> </tbody> <tbody> next page content... </tbody>
Und CSS:
tbody { display: block; page-break-before: avoid; } tbody { display: block; page-break-after: always; }
quelle