it-swarm.com.de

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ß, dass es page-break-before und page-break-after CSS-Eigenschaften gibt. Wo füge ich sie in meinen Code ein, um bei Bedarf Seitenwechsel zu erzwingen?

61
Mohammad Saberi

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 W3C CSS Print Profile Spezifikation.

Verweisen Sie auch auf die Salesforce-Entwicklerforen .

102
Hemant Metalia

Wo immer Sie eine Pause anwenden möchten, entweder eine table oder eine tr, müssen Sie eine Klasse für ex angeben. page-break mit CSS wie folgt:

/* 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 funktioniert so, wie Sie es brauchen

Alternativ können Sie auch eine div-Struktur für dasselbe haben:

CSS:

@media all {
 .page-break  { display: none; }
}

@media print {
 .page-break  { display: block; page-break-before: always; }
}

Div:

<div class="page-break"></div>
18
Aditya P Bhatt

Ich habe nach einem Fix für dieses Problem gesucht. Ich habe eine mobile Jquery-Site, die eine endgültige Druckseite hat und Dutzende von Seiten kombiniert. Ich habe alle oben genannten Korrekturen ausprobiert.

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>
11
Scotty Rogers

Leider haben die obigen Beispiele in Chrome für mich 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 auch das Folgende in Ihrem Stylesheet

    div.tablePage {
        page-break-inside:avoid; page-break-after:always;            
    }
8
Jay1b

das funktioniert für mich:

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

Von diesem Thread aus: Seitenumbruch innerhalb der Tabellenzeile vermeiden

0
Alan

Wenn Sie wissen, wie viele Sie auf einer Seite möchten, können Sie dies immer tun. Nach jedem 20. Eintrag wird eine neue Seite angezeigt.

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}
0
quemeful