Die Anwendung von "page-break-before" auf eine Tabellenzeile (tr)

Laut W3.org der Stil page-break-after gilt für block-level-Elemente (http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)

<tr> ist ein block-level-element (nach: http://www.htmlhelp.com/reference/html40/block.html, es ist)

Ich bin dabei, aber der Seitenumbruch ist nicht die Schaffung eines tatsächlichen Seitenumbruch beim Druck:

  <table>
    <tr><td>blah</td></tr>
    <tr><td>blah</td></tr>
    <tr style="page-break-after: always"><td>blah</td></tr>
    <tr><td>blah</td></tr>
  </table>

Tue ich mir das der richtige Weg?

Wenn <tr> war nicht ein block-level-element: wie bin ich nehme an, um dies zu erreichen Seitenumbruch?

Hinweis: die vor code ist nur ein Beispiel, aber was ich versuche zu tun ist, um eine page-break alle 5 Zeilen der Tabelle, wenn Ihr also irgendwelche Tipps für diesen Fall geschätzt werden

Print Funktionen sind schlecht implementiert im Browser; Sie bekommen alle Arten von Inkompatibilität. Wenn Sie die Erstellung der Tabelle programmgesteuert, würde ich vorschlagen, Schneide es in kleinere Tabellen, 5 Zeilen jede, und setzen Sie Seitenumbrüche zwischen Ihnen.
Schneiden Sie in kleinere Tabellen wäre irgendwie sichtbar in der "html-version" (vor dem drucken) 🙁
Schneiden Sie Sie dann nur beim drucken...
kein Glück mit meiner Antwort?

InformationsquelleAutor sports | 2013-12-09

  1. 12

    Innen <head>, setzen Sie diesen Stil

    <head>
    <style>
        @media print {
            tr.page-break  { display: block; page-break-before: always; }
        }   
    </style>
</head>

    So, es wird produzieren Sie ein Seitenumbruch beim drucken direkt vor dieser Zeile in der Tabelle.

    <tr class="page-break">
</tr>
    Zusätzlich (um zu verhindern, dass hässliche tds, weil von einer tr die Anzeige block) ich eingefügt eine leere tr mit der Klasse "page-break" und height = 0.
    Sie können auch ein pseudo-element zu vermeiden, müssen für die leeren tr: @media print { tr.page-break:before { content:""; display: block; page-break-before: always; } }
    Diese nicht wirklich zu funktionieren scheint oder sich auch nichts ändern, zumindest nicht in Chrom 50-etwas.

    InformationsquelleAutor guest

  2. 2

    Die Website, die Sie referenziert besagt, dass <tr> "kann auch als ein block-level-element, da es enthalten kann block-level-Elemente." Weder die W3.org oder Mozilla docs Staat, der <tr> ist ein block-level element.

    Einige Mögliche Lösungen

    1. Basierend auf der Formulierung und dein Beispiel, ich würde sicherstellen, dass die Zelle enthält einen wahren block-level-element. Hier sind zwei Beispiele mit <h1> und <p> die block-level-text-Elemente.

      <tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>

    2. Andere haben berichtet, dass ähnliche Probleme und eine Lösung könnte für Sie arbeiten.

    3. Erwähnt Meine Lister, Sie könnte versuchen Sie, fangen die Druck-Aktion erzeugen oder eine print-version der Seite, trennen Sie die Tabelle aus, so erhalten Sie den gewünschten Seitenumbruch nach jeder fünf Zeilen.

    InformationsquelleAutor JSuar

Schreibe einen Kommentar