Wie man CSS-Seitenumbruch anwendet, um eine Tabelle mit vielen Reihen zu drucken?

Habe ich eine dynamische Tabelle in meinem web-Seite, die manchmal enthält viele Zeilen. Ich weiß, es gibt page-break-before und page-break-after CSS-Eigenschaften.
Wo lege ich diese in meinem code, um ihn zu zwingen Seite brechen wenn nötig?

InformationsquelleAutor der Frage Mohammad Saberi | 2012-01-03

  1. 91

    Können Sie die folgenden verwenden:

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

    Finden Sie die W3C CSS Print Profile - Spezifikation für details.

    Und siehe auch die Salesforce Entwickler-Foren.

    InformationsquelleAutor der Antwort Hemant Metalia

  2. 15

    Wo auch immer Sie bewerben wollen, eine Pause, entweder ein table oder tr Sie braucht, um eine Klasse für die ex. 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 so funktionieren, wie Sie erforderlich

    Alternativ können Sie auch div Struktur für gleichen:

    CSS:

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

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

    Div:

    <div class="page-break"></div>

    InformationsquelleAutor der Antwort Aditya P Bhatt

  3. 8

    Leider die Beispiele oben funktionierte bei mir nicht in Chrome.

    Kam ich auf die Lösung, wo unten können Sie die max Höhe in PXs jeder Seite. Diese wird dann spaltet sich die Tabelle in separate Tabellen, wenn die Zeilen gleich, die Höhe.

    $(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();

});

    Benötigen Sie auch die unten in Ihrem stylesheet

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

    InformationsquelleAutor der Antwort Jay1b

  4. 7

    Habe ich mich um eine Lösung für dieses Problem. Ich habe eine jquery-mobile-Website, hat eine Letzte Seite drucken und es verbindet sich über Dutzende von Seiten. Ich habe versucht, alle Updates oben, aber das einzige, was ich bekommen konnte, um zu arbeiten, ist dies:

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

    InformationsquelleAutor der Antwort Scotty Rogers

  5. 0

    dies ist für mich arbeiten:

    <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 von Seitenumbrüchen innerhalb Zeile der Tabelle

    InformationsquelleAutor der Antwort Alan

  6. -1

    Hier ist ein Beispiel:

    Via css:

    <style>
  .my-table {
    page-break-before: always;
    page-break-after: always;
  }
  .my-table tr {
    page-break-inside: avoid;
  }
</style>

    oder direkt auf das element:

    <table style="page-break-before: always; page-break-after: always;">
  <tr style="page-break-inside: avoid;">
    ..
  </tr>
</table>

    InformationsquelleAutor der Antwort tomthorgal

Schreibe einen Kommentar