Wie wende ich einen CSS-Seitenumbruch an, um eine Tabelle mit vielen Zeilen zu drucken?

79

Ich habe eine dynamische Tabelle auf meiner Webseite, die manchmal viele Zeilen enthält. Ich weiß , es gibt page-break-beforeund page-break-afterCSS - Eigenschaften. Wo füge ich sie in meinen Code ein, um bei Bedarf das Brechen von Seiten zu erzwingen?

Mohammad Saberi
quelle

Antworten:

136

Sie können Folgendes verwenden:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

Weitere Informationen finden Sie in der CSS- Druckprofilspezifikation des W3C .

Lesen Sie auch die Salesforce-Entwicklerforen .

Hemant Metalia
quelle
8
Wenn Sie dies mit einem Framework wie Bootstrap versuchen, beachten Sie, dass die Verwendung von .spanX (welche Stile mit float verwendet werden) Seitenumbruch- * Attribute stören kann. Ich habe selbst viel Zeit durch diese kleine Nuance verloren.
Jarmsmith
1
Dies funktioniert mit UIWebView, daher gehe ich davon aus, dass dies jetzt auch mit Safari
funktioniert
David bedankt sich für die gemeinsame Nutzung der Lösung für Safari oder Charome. JonEasy Sie können die Lösung von David verwenden, falls diese Lösung nicht mit Safari funktioniert. @ Maxence froh, dass es geholfen hat. Entschuldigung, ich war einige Monate nicht aktiv und konnte daher nicht frühzeitig antworten.
Hemant Metalia
2
Diese Lösung bricht mehrzeilige Zellen nicht sauber zwischen ihren Zellrändern auf, sondern bricht sie in der Mitte auf. Ich habe jedoch eine Lösung gefunden, die in allen aktuellen Browsern (Safari, FF und Chrome) funktioniert
Thomas Tempelmann
1
@Saif diese Antwort wurde vor einigen Jahren gegeben, kann es sein, dass sie nicht mit neueren Versionen des Browsers übereinstimmt. aber Sie können einen Hinweis dadurch bekommen.
Hemant Metalia
23

Wo immer Sie eine Pause einlegen möchten, entweder a tableoder tr, müssen Sie eine Klasse zum Beispiel geben. page-breakmit 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 divStruktur 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>
Aditya P Bhatt
quelle
17
Dies funktioniert nur, wenn Sie im Voraus genau wissen, wie viele Zeilen auf eine Seite passen (da Sie die Seitenumbrüche direkt in Ihrem Markup deklarieren müssen). Dies kann schwierig (oder unmöglich) sein, wenn die Möglichkeit besteht, dass die Daten in einer Tabellenzeile in eine zweite Zeile umgebrochen werden. Und was ist mit mehreren Seitengrößen (A4 vs US Letter vs US Legal)?
Aapierce
Diese Lösung funktionierte bei mir nicht, wenn mehrzeilige Zellen und mehrere Spalten verwendet wurden. Ich habe jedoch eine Lösung dafür gefunden: stackoverflow.com/a/47498775/43615 - Es wird auch das Problem behandelt, das @aapierce erwähnt.
Thomas Tempelmann
1
trIn Chrome v64 konnte die Unterbrechung auch nicht funktionieren.
Kai Noack
15

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>
Scotty Rogers
quelle
Dies ist eine Arbeit in der Tabelle, wenn dieser HTML-Code zwischen zwei TR-Tags (CHROME) steht. Dies funktioniert NICHT in Tabellen, wenn dieser HTML-Code zwischen zwei TR-Tags (FIREFOX) steht. In FileFox arbeiten CSS-Regel-> Tabelle tr: n-tes Kind (10) {Seitenumbruch nach: immer; Seitenumbruch nach innen: vermeiden;}
andrejs82
8

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;            
    }
Jay
quelle
Tut nichts, wenn die Tabelle eine große Zeile hat.
Chris
1

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

Alan
quelle
das funktioniert etwas aus. Bedeutet, dass die Daten unten nicht mehr in Reihe geschnitten werden. Rudern Sie es noch schneiden. aber zumindest besser als die eigentliche Ausgabe
aviboy2006
0

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;
}
sehr schön
quelle
Das funktioniert bei mir nicht :( Ich verwende CHOME 83.0.4103.116
andrejs82
0

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!

AdheneManx
quelle
-1

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>
Tomthorgal
quelle
Dies verwendet erfolgreich 4 Seiten für eine effektiv 2-seitige Tabelle und scheint den gleichen Effekt zu haben wie kein CSS in Safari (6) und Chrome (24).
David
-2

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; }
Joris
quelle
1
Das manuelle Teilen der Tabelle in Seiten ist keine sehr gute Lösung, es sei denn, der Inhalt sollte natürlich auf separaten Seiten gedruckt werden (z. B. Finanzinformationen, die eine Seite pro Jahr gedruckt werden). Sie wissen vorher nicht, wie viel Inhalt auf eine Seite passt gedruckte Seite.
JJJ