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

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?

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 .

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>

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>

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;            
    }

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

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;
}

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!

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>

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; }