# Lange Tabellen und Paginierung

Lassen Sie lange Tabellen über Blätter fließen, halten Sie kurze Blöcke zusammen und wählen Sie, wo ein neuer Abschnitt beginnt.

Während Sie ein Layout erstellen, möchten Sie möglicherweise, dass einige Inhalte kontinuierlich fließen, ein Block zusammenbleibt oder ein neuer Teil auf einem eigenen Blatt beginnt. Mit Tembuilder können Sie diese Ansätze innerhalb derselben Vorlage kombinieren.

Legen Sie das Paginierungsverhalten für jeden Abschnitt unter **Config → Seitenumbrüche** fest. In diesem Handbuch werden die Optionen, langen Tabellen und CSS-Regeln behandelt, die sich auf Seitenumbrüche auswirken können.

## 1. Öffnen Sie die Seitenumbrucheinstellungen eines Abschnitts

Wählen Sie den Abschnitt in **Structure** aus und öffnen Sie dann **Config → Seitenumbrüche**. Es gibt zwei Steuerelemente:

- **Zusammenhalten**: ob der Abschnitt auf PDF-Blätter aufgeteilt werden kann.
- **Seitenumbruch**: ob ein Umbruch vor oder nach dem Abschnitt erzwungen werden soll.

Die Steuerungen sind unabhängig. Ein Abschnitt kann auf einem neuen Blatt beginnen und sich dennoch über mehrere Blätter erstrecken, wenn sein Inhalt lang ist.

Beginnen Sie bei einer Tabelle oder Liste mit einer variablen Anzahl von Zeilen mit **Zusammenhalten: Aus** und **Seitenumbruch: Keine**, um den Inhalt fließen zu lassen.

<figure class="doc-sim pagination-illustration" aria-label="Structure → Abschnitt → Config → Seitenumbrüche">
<div class="sim-stage"><div class="pg-path">Structure <span>→</span> Rechnungspositionen <span>→</span> Config</div><div class="sim-panel pg-editor"><div class="pg-structure"><div class="sim-panel-title">STRUKTUR</div><div class="sim-tree-row">⌄ Rechnung</div><div class="sim-tree-child sim-muted">Rechnungsparteien</div><div class="sim-tree-child sim-selected">Rechnungspositionen</div><div class="sim-tree-child sim-muted">Abrechnung</div></div><div class="pg-config"><div class="sim-tabs"><span>HTML</span><span>CSS</span><span>Props</span><span class="sim-active sim-focus">Config</span></div><div class="pg-config-card"><strong>Seitenumbrüche</strong><div class="pg-setting"><span>Zusammenhalten</span><div class="pg-options"><span class="pg-option pg-active">Aus</span><span class="pg-option">Ein</span></div></div><div class="pg-setting"><span>Seitenumbruch</span><div class="pg-options"><span class="pg-option pg-active">Keine</span><span class="pg-option">Vorher</span><span class="pg-option">Nachher</span><span class="pg-option">Beides</span></div></div></div></div></div></div>
<figcaption>Structure → Abschnitt → Config → Seitenumbrüche</figcaption>
</figure>

## 2. Halten Sie einen Inhaltsblock zusammen

Verwenden Sie **Zusammenhalten: Ein** für einen kurzen Abschnitt, der erhalten bleiben soll, z. B. eine Signatur, Zahlungsdetails oder eine Zusammenfassung. Wenn der verbleibende Platz zu klein ist, wird der Abschnitt auf das nächste Blatt verschoben.

Verwenden Sie **Aus** für eine lange Tabelle oder Liste, die über mehrere Blätter hinweg fortgesetzt werden muss. Wenn Sie die gesamte Tabelle zusammenhalten, kann auf dem vorherigen Blatt eine große Lücke entstehen.

Die Einstellung gilt für den **gesamten Abschnitt**. Um nur die Signatur zusammenzuhalten, machen Sie daraus einen separaten Abschnitt, anstatt „Ein“ für einen Abschnitt zu aktivieren, der die gesamte Servicetabelle enthält.

<figure class="doc-sim pagination-illustration" aria-label="Ein → Signaturabschnitt zusammen auf das nächste Blatt verschieben">
<div class="sim-stage"><div class="pg-keep-setting sim-panel"><strong>Zusammenhalten</strong><div class="pg-options"><span class="pg-option">Aus</span><span class="pg-option pg-active sim-focus">Ein</span></div></div><div class="pg-comparison"><div><small>Aus</small><div class="pg-mini-pair"><div class="pg-sheet"><div class="pg-lines"><i></i><i></i><i></i></div><div class="pg-signature pg-signature-first">GENEHMIGUNG</div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-signature pg-signature-rest"><i></i><span>Unterschrift</span></div><small class="pg-sheet-number">2</small></div></div></div><div><small>Ein</small><div class="pg-mini-pair"><div class="pg-sheet"><div class="pg-lines"><i></i><i></i><i></i></div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-signature">GENEHMIGUNG<i></i><span>Unterschrift</span></div><small class="pg-sheet-number">2</small></div></div></div></div></div>
<figcaption>Ein → Signaturabschnitt zusammen auf das nächste Blatt verschieben</figcaption>
</figure>

## 3. Wählen Sie, wo ein neuer Abschnitt beginnen soll

Verwenden Sie **Seitenumbruch**, um Dokumentteile zu trennen, z. B. um die Bedingungen auf einem neuen Blatt nach einer Rechnung zu beginnen.

| Option | Verhalten |
| --- | --- |
| **Keine** | Erzwingen Sie keine Pause vor oder nach dem Abschnitt. |
| **Vorher** | Beginnen Sie diesen Abschnitt auf einem neuen Blatt, wenn der Inhalt davor steht. |
| **Nach** | Beginnen Sie den nächsten Abschnitt auf einem neuen Blatt. |
| **Beide** | Pause vor und nach dem Abschnitt, wenn auf beiden Seiten Inhalt vorhanden ist. |

**Beide** beschränkt den Abschnitt nicht auf ein Blatt. **Zusammenhalten** steuert weiterhin die Aufteilung innerhalb des Abschnitts.

Ein Umbruch an einer vorhandenen Seitengrenze fügt kein leeres Blatt hinzu. Beispielsweise wird bei „Vorher“ im ersten Abschnitt kein leeres Blatt vor dem Dokument eingefügt.

<figure class="doc-sim pagination-illustration" aria-label="Vorher → Beginnen Sie den Abschnitt auf einem neuen Blatt">
<div class="sim-stage"><div class="sim-panel"><div class="pg-break-head"><strong>Seitenumbruch</strong><div class="pg-options"><span class="pg-option">Keine</span><span class="pg-option pg-active sim-focus">Vorher</span><span class="pg-option">Nachher</span><span class="pg-option">Beides</span></div></div><div class="pg-break-pages"><div class="pg-sheet"><b class="pg-doc-title">Inhalt</b><div class="pg-lines"><i></i><i></i><i></i></div><div class="pg-lines"><i></i><i></i><i></i></div><small class="pg-sheet-number">1</small></div><span class="pg-arrow" aria-hidden="true">→</span><div class="pg-sheet"><div class="pg-new-section"><b>Bedingungen</b><div class="pg-lines"><i></i><i></i><i></i></div></div><small class="pg-sheet-number">2</small></div></div></div></div>
<figcaption>Vorher → Beginnen Sie den Abschnitt auf einem neuen Blatt</figcaption>
</figure>

## 4. Lassen Sie lange Tabellen blattübergreifend weiterlaufen

Stellen Sie **Zusammenhalten: Aus** für den Abschnitt ein, der die Tabelle enthält. Verwenden Sie `<thead>` for the header and `<tbody>` for data rows. The `<thead>` Die Kopfzeile wird wiederholt, wenn die Tabelle auf einem anderen Blatt fortgesetzt wird.

Generieren Sie für Servicezeilen Tabelleninhalte aus `params.lineItems`:

```handlebars
<table>
  <thead>
    <tr><th>Service</th><th>Quantity</th><th>Amount</th></tr>
  </thead>
  <tbody>
    {{#each params.lineItems}}
      <tr>
        <td>{{ description }}</td>
        <td>{{ qty }}</td>
        <td>{{ amount }}</td>
      </tr>
    {{/each}}
  </tbody>
</table>
```

Um Summen nach der letzten Tabellenzeile zu platzieren, platzieren Sie sie hinter der Tabelle oder im folgenden Abschnitt mit **Seitenumbruch: Keine**. Um die Summen beizubehalten, aktivieren Sie „Zusammenhalten“ nur im Abschnitt „Summen“.

Weitere Informationen zur Übergabe von Listen an eine Vorlage finden Sie unter [Arrays und Objekte](/docs/de/data/arrays-objects/).

<figure class="doc-sim pagination-illustration" aria-label="Die Tabelle fährt mit dem nächsten Blatt fort, wobei die Kopfzeile wiederholt wird">
<div class="sim-stage"><div class="pg-table-settings"><span class="sim-badge sim-focus">Zusammenhalten: Aus</span><span class="sim-badge">Seitenumbruch: Keiner</span></div><div class="pg-table-pages"><div class="pg-sheet"><div class="pg-table"><div class="pg-table-head"><b>SERVICE</b><b>MENGE</b></div><div><span>Dienst 1</span><span>1</span></div><div><span>Dienst 2</span><span>1</span></div><div><span>Dienst 3</span><span>1</span></div><div><span>Service 4</span><span>1</span></div><div><span>Service 5</span><span>1</span></div></div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-table"><div class="pg-table-head"><b>SERVICE</b><b>MENGE</b></div><div><span>Service 6</span><span>1</span></div><div><span>Service 7</span><span>1</span></div><div><span>Service 8</span><span>1</span></div><div><span>Service 9</span><span>1</span></div><div><span>Service 10</span><span>1</span></div></div><small class="pg-sheet-number">2</small></div></div></div>
<figcaption>Die Tabelle fährt mit dem nächsten Blatt fort, wobei die Kopfzeile wiederholt wird</figcaption>
</figure>

## 5. Wenn Inhalte abgeschnitten oder als Block verschoben werden

Diese Symptome deuten normalerweise auf unterschiedliche Einstellungen hin:

| Symptom | Wo suchen? |
| --- | --- |
| Ein ganzer Abschnitt wird zum nächsten Blatt verschoben und hinterlässt eine große Lücke | Die **Zusammenhalten**-Einstellung des Abschnitts und `break-inside` für seinen Container. |
| Letzte Zeilen verschwinden am Rand eines Containers | Die Container CSS `height`, `max-height` und `overflow`. |
| Ein Abschnitt beginnt trotz des verfügbaren Platzes immer auf einem neuen Blatt | Sein **Seitenumbruch: Vorher/Beide**, Nachher im vorherigen Abschnitt oder CSS `break-before`. |

Zum Beispiel ein `.items`-Container mit fester Höhe und `overflow: hidden` klammert alles ab, was über seine Box hinausgeht. Wenn es mit der Liste wachsen soll, entfernen Sie die Höhenbeschränkung und lassen Sie sichtbare Inhalte zu, wie unten dargestellt.

Config steuert den Abschnitt selbst. Die darin enthaltenen Elemente können immer noch ihre eigenen CSS-Break-Regeln haben. Überprüfen Sie diese daher, wenn eine Änderung von Config das Ergebnis nicht ändert.

<figure class="doc-sim pagination-illustration" aria-label="Abschnitt CSS → Passen Sie den Container an, der den Inhalt einschränkt oder ausschneidet">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs"><span>HTML</span><span class="sim-active">CSS</span><span>Props</span><span>Config</span></div><div class="pg-css-comparison"><div><small>Container mit fester Höhe</small><div class="pg-code"><code>.items {<br />  height: 120px;<br />  overflow: hidden;<br />}</code></div></div><div><small>Container in Inhaltsgröße</small><div class="pg-code sim-focus"><code>.items {<br />  height: auto;<br />  overflow: visible;<br />}</code></div></div></div></div></div>
<figcaption>Abschnitt CSS → Passen Sie den Container an, der den Inhalt einschränkt oder ausschneidet</figcaption>
</figure>
