Print-Tabellen: Seitenumbrueche gezielt steuern in CSS

1. Das Grundproblem: warum Tabellen beim Drucken zerreissen

Browser brechen eine Seite standardmäßig genau dort um, wo der verfügbare Platz endet, ohne Rücksicht darauf, ob dieser Punkt mitten in einer Tabellenzeile liegt. Bei einer Bestellliste mit vielen Positionen bedeutet das im schlimmsten Fall, dass Artikelname, Menge und Preis einer Zeile auf zwei unterschiedliche Seiten verteilt werden, während die zugehörigen Spaltenüberschriften nur auf der ersten Seite sichtbar bleiben.

Dieses Verhalten ist kein Fehler des Browsers, sondern die konsequente Standardeinstellung ohne explizite Steuerung: Der Druckalgorithmus kennt den logischen Zusammenhang zwischen den Zellen einer Zeile nicht automatisch, er sieht nur eine fortlaufende Folge von Boxen, die er an der nächstbesten Gelegenheit umbricht. Erst gezielte CSS-Regeln teilen dem Browser mit, welche Bereiche als Einheit zusammenbleiben müssen.

2. break-inside: avoid für Tabellenzeilen

Die Property break-inside: avoid, angewendet auf tr, weist den Browser an, innerhalb einer Tabellenzeile möglichst keinen Seitenumbruch vorzunehmen, sondern die gesamte Zeile stattdessen auf die nächste Seite zu verschieben, falls sie nicht mehr vollständig auf die aktuelle passt. Für die überwiegende Mehrheit der Zeilen mit normaler Höhe funktioniert das zuverlässig in allen modernen Browsern und löst das Kernproblem zerrissener Zeilen fast vollständig.

Bei außergewöhnlich hohen Zeilen, etwa mit mehrzeiligem Freitext in einer Spalte, kann avoid an physikalische Grenzen stoßen: Passt die Zeile selbst nicht auf eine ganze Seite, muss der Browser trotzdem irgendwo umbrechen. In der Praxis betrifft das selten normale Bestellpositionen, aber bei Freitextfeldern wie Lieferhinweisen lohnt sich eine bewusste Begrenzung der Zeilenhöhe im Druck-Stylesheet.

@media print {
  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* Zeilen nicht mitten im Umbruch zerreissen */
  tr {
    break-inside: avoid;
  }

  /* Ueberschriften und Fusszeilen ebenfalls schuetzen */
  h1, h2, h3, .invoice-header {
    break-after: avoid;
  }
}

3. Wiederholte Tabellenköpfe mit thead über Seitenumbrüche

Ein semantisch korrekt ausgezeichnetes <thead> wird von allen gängigen Browsern beim Drucken automatisch auf jeder neuen Seite wiederholt, auf der die Tabelle fortgesetzt wird, vorausgesetzt die Tabelle nutzt tatsächlich thead, tbody und nicht einfach nur tr-Elemente direkt unter table. Diese automatische Wiederholung ist keine CSS-Eigenschaft im engeren Sinne, sondern eingebautes Verhalten der HTML-Tabellensemantik in Kombination mit dem Druckmodell des Browsers.

Der häufigste Grund, warum dieses Verhalten in der Praxis nicht funktioniert, ist fehlendes oder falsch strukturiertes Markup: Wird die Kopfzeile nur optisch mit font-weight: bold hervorgehoben, aber technisch als normale tr innerhalb von tbody ausgezeichnet, erkennt der Browser sie nicht als wiederholbaren Kopf und zeigt die Spaltenbeschriftung nur auf der ersten Seite.

<table class="order-items">
  <thead>
    <tr>
      <th>Artikel</th>
      <th>Menge</th>
      <th>Einzelpreis</th>
      <th>Summe</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Produkt A</td><td>2</td><td>19,90 EUR</td><td>39,80 EUR</td></tr>
    <tr><td>Produkt B</td><td>1</td><td>49,00 EUR</td><td>49,00 EUR</td></tr>
    <!-- ... viele weitere Zeilen ... -->
  </tbody>
</table>

4. tfoot für Summenzeilen: fixiert am Seitenende oder nur am Tabellenende

Neben thead unterstützen Browser auch <tfoot> als wiederholbaren Fußbereich, allerdings mit einem wichtigen Unterschied: Anders als der Tabellenkopf erscheint der Fuß standardmäßig nur am tatsächlichen Ende der gesamten Tabelle, nicht auf jeder Zwischenseite. Für eine Zwischensumme, die auf jeder Seite unten stehen soll, reicht tfoot allein deshalb nicht aus.

Für dieses Muster, wie es bei mehrseitigen Rechnungen mit laufender Zwischensumme üblich ist, braucht es eine Kombination aus mehreren, bewusst wiederholten Zeilen innerhalb des Inhaltsbereichs selbst oder eine serverseitige Aufteilung der Tabelle in mehrere kleinere Tabellen mit jeweils eigener Zwischensumme, weil reines CSS keinen Mechanismus für seitenbezogene Laufsummen kennt.

5. Zusammenspiel mit @page: Kopf- und Fußzeilen der Druckseite

Während thead den Tabellenkopf innerhalb des Inhaltsflusses wiederholt, regeln @page-Regeln mit ihren Margin-Boxen die eigentliche Kopf- und Fußzeile der Druckseite selbst, etwa Firmenlogo, Seitenzahl oder Rechnungsnummer, die unabhängig vom Tabelleninhalt auf jeder Seite erscheinen sollen. Beide Mechanismen ergänzen sich: thead für den fachlichen Tabellenkopf, @page-Margin-Boxen für den dokumentweiten Seitenrahmen.

Eine Bestellbestätigung mit vielen Positionen profitiert typischerweise von beidem gleichzeitig: Die Margin-Box am oberen Seitenrand zeigt Firmenlogo und Bestellnummer auf jeder Seite, während der wiederholte thead direkt über der Tabelle die Spaltenbeschriftung für die fortgesetzte Positionsliste liefert. So bleibt jede einzelne gedruckte Seite ohne Kontextverlust lesbar, auch wenn sie isoliert betrachtet wird.

@page {
  size: A4;
  margin: 2cm 1.5cm;

  @top-right {
    content: "Bestellbestaetigung " counter(page) " / " counter(pages);
  }
}

6. Häufige Druckfehler bei Bestellbestätigungen und Rechnungen

Der mit Abstand häufigste Fehler ist eine Tabelle, deren Kopfzeile technisch als normale tr in tbody steht, sodass die Spaltenbeschriftung nur auf Seite eins erscheint und jede Folgeseite ohne Kontext dasteht. Der zweithäufigste Fehler ist ein fehlendes break-inside: avoid, wodurch einzelne Positionszeilen mitten durch Menge und Preis geschnitten werden, was bei einer Rechnung schnell wie ein Rechenfehler statt wie ein Layoutfehler aussieht.

Ein dritter, subtilerer Fehler entsteht durch feste Pixel-Höhen auf Tabellenzellen in Kombination mit variabler Schriftgröße im Druck: Passt der tatsächliche Zellinhalt nicht in die fest vorgegebene Höhe, kann Text abgeschnitten werden, ohne dass der Browser dafür eine Fehlermeldung ausgibt. Für Druck-Stylesheets sind deshalb feste Höhen auf Tabellenzellen generell zu vermeiden, der Inhalt sollte die Zeilenhöhe bestimmen, nicht umgekehrt.

7. Testen von Seitenumbrüchen ohne echten Drucker

Die Druckvorschau des Browsers, meist über Strg/Cmd + P erreichbar, zeigt Seitenumbrüche fast identisch zum späteren PDF- oder Papierausdruck an und ist damit das schnellste Testwerkzeug im Entwicklungsalltag. Für automatisierte Regressionstests lässt sich derselbe Effekt mit Headless-Browsern erzeugen, die eine Seite direkt als PDF exportieren und so eine reproduzierbare Grundlage für visuelle Vergleichstests liefern.

Besonders wichtig ist, verschiedene Datenmengen zu testen, nicht nur eine einzelne Beispielbestellung: eine Tabelle mit genau einer Zeile, eine mit exakt so vielen Zeilen, dass der Umbruch knapp vor oder nach der letzten Zeile einer Seite liegt, und eine sehr lange Liste über mehrere Seiten hinweg. Genau an diesen Randfällen zeigen sich die meisten Fehler in der Umbruchlogik.

8. Grenzen von reinem CSS gegenüber Server-seitigem PDF-Export

Reines Browser-CSS beherrscht Seitenumbrüche, wiederholte Tabellenköpfe und einfache Margin-Boxen zuverlässig, stößt aber an Grenzen bei komplexeren Layoutanforderungen wie exakt kontrollierten laufenden Zwischensummen pro Seite oder pixelgenauer Positionierung für vorgedruckte Formulare. Solche Anforderungen sind mit CSS zwar teilweise über Umwege lösbar, aber oft fragiler als eine dedizierte serverseitige PDF-Bibliothek.

Für regulatorisch heikle Dokumente wie Rechnungen mit gesetzlichen Formatvorgaben lohnt sich deshalb eine bewusste Entscheidung: einfache, häufig geänderte Druckansichten wie Bestellbestätigungen bleiben gut mit CSS wartbar, während hochformalisierte, seltener geänderte Dokumente wie Steuerrechnungen von einer serverseitigen PDF-Generierung mit exakter Layout-Kontrolle profitieren können.

9. Checkliste für mehrseitige Tabellen im Druck

Vor dem Livegang eines Rechnungs- oder Bestellbestätigungs-Layouts lohnt sich eine kurze Prüfung: Steht die Kopfzeile korrekt in thead, ist break-inside: avoid auf tr gesetzt, sind feste Pixel-Höhen auf Zellen entfernt, und wurde die Druckvorschau mit einer sehr langen sowie einer sehr kurzen Beispielliste getestet.

Diese vier Punkte decken die überwiegende Mehrheit der Probleme ab, die in der Praxis bei mehrseitigen Tabellen im Druck auftreten, und lassen sich alle ohne JavaScript oder serverseitige Zusatzwerkzeuge direkt im CSS lösen.

10. Zusammenfassung

11. FAQ: Print-Tabellen und Seitenumbrueche: Das Wichtigste auf einen Blick