# Bảng dài và phân trang

Cho bảng chạy qua nhiều tờ, giữ các khối ngắn cùng nhau và chọn vị trí bắt đầu section mới.

Khi xây dựng bố cục, bạn có thể muốn một phần nội dung nối tiếp tự nhiên, một khối được giữ liền mạch hoặc một phần mới bắt đầu trên tờ riêng. Tembuilder cho phép bạn kết hợp những cách này ngay trong cùng một mẫu.

Bạn sẽ thiết lập cách phân trang cho từng section trong **Config → Page breaks**. Bài này hướng dẫn cách dùng các lựa chọn đó, xử lý bảng dài và tìm những quy tắc CSS có thể ảnh hưởng đến việc chia trang.

## 1. Mở thiết lập ngắt trang của section

Trong **Structure**, chọn section muốn chỉnh rồi mở **Config → Page breaks**. Có hai điều khiển:

- **Keep together**: section có được tách qua nhiều tờ PDF hay không.
- **Page break**: có chủ động ngắt trang trước hoặc sau section hay không.

Hai điều khiển này độc lập. Chẳng hạn, một section có thể bắt đầu ở tờ mới nhưng vẫn được phép chạy qua nhiều tờ nếu nội dung dài.

Với bảng hoặc danh sách có số dòng thay đổi, bắt đầu bằng **Keep together: Off** và **Page break: None** để nội dung tự phân trang.

<figure class="doc-sim pagination-illustration" aria-label="Structure → Section → Config → Page breaks">
<div class="sim-stage"><div class="pg-path">Structure <span>→</span> Invoice Items <span>→</span> Config</div><div class="sim-panel pg-editor"><div class="pg-structure"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row">⌄ Invoice</div><div class="sim-tree-child sim-muted">Billing Parties</div><div class="sim-tree-child sim-selected">Invoice Items</div><div class="sim-tree-child sim-muted">Settlement</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>Page breaks</strong><div class="pg-setting"><span>Keep together</span><div class="pg-options"><span class="pg-option pg-active">Off</span><span class="pg-option">On</span></div></div><div class="pg-setting"><span>Page break</span><div class="pg-options"><span class="pg-option pg-active">None</span><span class="pg-option">Before</span><span class="pg-option">After</span><span class="pg-option">Both</span></div></div></div></div></div></div>
<figcaption>Structure → Section → Config → Page breaks</figcaption>
</figure>

## 2. Giữ một khối nội dung cùng nhau

Chọn **Keep together: On** cho những section ngắn cần liền mạch, như chữ ký, thông tin thanh toán hoặc phần tổng kết. Khi khoảng trống còn lại không đủ, section được chuyển sang tờ tiếp theo.

Chọn **Off** cho bảng dài hoặc danh sách cần nối qua nhiều tờ. Giữ cả bảng bằng On có thể khiến phần còn lại của tờ trước bị bỏ trống.

Thiết lập áp dụng cho **toàn bộ section**. Nếu chỉ muốn giữ phần chữ ký, hãy đặt chữ ký thành một section riêng thay vì bật On cho section đang chứa cả bảng dịch vụ.

<figure class="doc-sim pagination-illustration" aria-label="On → chuyển cả section chữ ký sang tờ tiếp theo">
<div class="sim-stage"><div class="pg-keep-setting sim-panel"><strong>Keep together</strong><div class="pg-options"><span class="pg-option">Off</span><span class="pg-option pg-active sim-focus">On</span></div></div><div class="pg-comparison"><div><small>Off</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">XÁC NHẬN</div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-signature pg-signature-rest"><i></i><span>Chữ ký</span></div><small class="pg-sheet-number">2</small></div></div></div><div><small>On</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">XÁC NHẬN<i></i><span>Chữ ký</span></div><small class="pg-sheet-number">2</small></div></div></div></div></div>
<figcaption>On → chuyển cả section chữ ký sang tờ tiếp theo</figcaption>
</figure>

## 3. Chọn nơi bắt đầu section mới

Dùng **Page break** khi muốn tách rõ các phần của tài liệu, chẳng hạn đưa điều khoản sang tờ mới sau phần hóa đơn.

| Lựa chọn | Cách áp dụng |
| --- | --- |
| **None** | Không ép ngắt trước hoặc sau section. |
| **Before** | Bắt đầu section này ở tờ mới khi có nội dung phía trước. |
| **After** | Bắt đầu section tiếp theo ở tờ mới. |
| **Both** | Ngắt cả trước và sau section khi có nội dung ở hai phía. |

**Both** không có nghĩa section chỉ được nằm trên một tờ; việc cho phép tách bên trong vẫn do **Keep together** quyết định.

Ngắt ngay tại ranh giới trang không tạo thêm một tờ trắng. Ví dụ, Before trên section đầu tiên không chèn một tờ trống trước tài liệu.

<figure class="doc-sim pagination-illustration" aria-label="Before → bắt đầu section ở tờ mới">
<div class="sim-stage"><div class="sim-panel"><div class="pg-break-head"><strong>Page break</strong><div class="pg-options"><span class="pg-option">None</span><span class="pg-option pg-active sim-focus">Before</span><span class="pg-option">After</span><span class="pg-option">Both</span></div></div><div class="pg-break-pages"><div class="pg-sheet"><b class="pg-doc-title">Nội dung</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>Điều khoản</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>Before → bắt đầu section ở tờ mới</figcaption>
</figure>

## 4. Cho bảng dài nối qua nhiều tờ

Trong section chứa bảng, đặt **Keep together: Off**. Dùng `<thead>` cho hàng tiêu đề và `<tbody>` cho các dòng dữ liệu; khi bảng kéo dài sang tờ tiếp theo, hàng tiêu đề trong `<thead>` được lặp lại.

Với danh sách dịch vụ, bạn có thể tạo dòng bảng từ `params.lineItems`:

```handlebars
<table>
  <thead>
    <tr><th>Dịch vụ</th><th>Số lượng</th><th>Thành tiền</th></tr>
  </thead>
  <tbody>
    {{#each params.lineItems}}
      <tr>
        <td>{{ description }}</td>
        <td>{{ qty }}</td>
        <td>{{ amount }}</td>
      </tr>
    {{/each}}
  </tbody>
</table>
```

Để phần tổng tiền nằm sau dòng cuối của bảng, đặt nó sau bảng hoặc trong section tiếp theo với **Page break: None**. Nếu muốn giữ khối tổng tiền liền mạch, chỉ bật Keep together cho section tổng tiền.

Xem [Mảng và object](/docs/vi/data/arrays-objects/) để tìm hiểu cách đưa danh sách dữ liệu vào mẫu.

<figure class="doc-sim pagination-illustration" aria-label="Bảng nối sang tờ tiếp theo, hàng tiêu đề trong thead được lặp lại">
<div class="sim-stage"><div class="pg-table-settings"><span class="sim-badge sim-focus">Keep together: Off</span><span class="sim-badge">Page break: None</span></div><div class="pg-table-pages"><div class="pg-sheet"><div class="pg-table"><div class="pg-table-head"><b>DỊCH VỤ</b><b>SL</b></div><div><span>Dịch vụ 1</span><span>1</span></div><div><span>Dịch vụ 2</span><span>1</span></div><div><span>Dịch vụ 3</span><span>1</span></div><div><span>Dịch vụ 4</span><span>1</span></div><div><span>Dịch vụ 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>DỊCH VỤ</b><b>SL</b></div><div><span>Dịch vụ 6</span><span>1</span></div><div><span>Dịch vụ 7</span><span>1</span></div><div><span>Dịch vụ 8</span><span>1</span></div><div><span>Dịch vụ 9</span><span>1</span></div><div><span>Dịch vụ 10</span><span>1</span></div></div><small class="pg-sheet-number">2</small></div></div></div>
<figcaption>Bảng nối sang tờ tiếp theo, hàng tiêu đề trong thead được lặp lại</figcaption>
</figure>

## 5. Khi nội dung bị cắt hoặc bị đẩy cả khối

Hai tình huống này thường cần chỉnh ở hai nơi khác nhau:

| Hiện tượng | Nơi cần xem |
| --- | --- |
| Cả section chuyển sang tờ sau, để lại khoảng trống lớn | **Keep together** của section và `break-inside` trong CSS của khối chứa. |
| Các dòng cuối biến mất ở mép một khối | `height`, `max-height` và `overflow` trong CSS của khối đó. |
| Section luôn bắt đầu ở tờ mới dù phía trước còn chỗ | **Page break: Before/Both**, ngắt After của section trước hoặc `break-before` trong CSS. |

Ví dụ, khối `.items` có chiều cao cố định và `overflow: hidden` sẽ cắt phần vượt ra ngoài. Nếu khối này cần giãn theo danh sách, bỏ giới hạn chiều cao và để nội dung hiển thị như hình dưới.

Thiết lập trong Config áp dụng ở cấp section. Các phần tử bên trong vẫn có thể có quy tắc ngắt trang riêng trong CSS, nên đây là nơi cần xem tiếp nếu đã đổi Config mà kết quả chưa thay đổi.

<figure class="doc-sim pagination-illustration" aria-label="CSS của section → sửa khối đang giới hạn hoặc cắt nội dung">
<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>Khối bị giới hạn chiều cao</small><div class="pg-code"><code>.items {<br />  height: 120px;<br />  overflow: hidden;<br />}</code></div></div><div><small>Khối giãn theo nội dung</small><div class="pg-code sim-focus"><code>.items {<br />  height: auto;<br />  overflow: visible;<br />}</code></div></div></div></div></div>
<figcaption>CSS của section → sửa khối đang giới hạn hoặc cắt nội dung</figcaption>
</figure>