---
title: "跨越分页符的行"
description: "让高大的表格行继续到下一页，而不是整体下移，效果类似 Word 拆分表格行。PagesTableKit 的实验性功能。"
canonical_url: "https://tiptap.zhcndoc.com/pages/guides/row-fragmentation"
---

# 跨越分页符的行

让高大的表格行继续到下一页，而不是整体下移，效果类似 Word 拆分表格行。PagesTableKit 的实验性功能。

放不下当前页面剩余空间的表格行会整体移到下一页，导致页面底部出现空白。高于整页的行则完全无法放置。

Word 不会这样处理：它会拆分表格行，并在下一页继续渲染。行分页拆分提供了相同的效果。从 DOCX 导入的文档经常包含这类行，因此真实内容中很容易出现页面底部空白。

> **实验性功能:**
>
> 行分页拆分是实验性功能，默认关闭。选项名称以 `experimental` 开头，是因为行为和选项仍可能发生变化。

## 开启功能

```ts
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'

TableKit.configure({ experimentalRowFragmentation: true })
```

关闭选项时，行为不会改变，插件也不会加载。

如果你构建自己的表格套件而不使用 `TableKit`，请直接配置 `TableRow`，它包含完整功能：

```ts
import { TableRow } from '@tiptap-pro/extension-pages-tablekit'

TableRow.configure({ experimentalRowFragmentation: true })
```

你也可以通过 [PageKit](https://tiptap.zhcndoc.com/pages/guides/pagekit-usage.md) 传入该选项：

```ts
PageKit.configure({
  table: { experimentalRowFragmentation: true },
})
```

## 文档不会改变

行仍然是一个行节点。拆分只会改变行的绘制方式。

- `editor.getJSON()` 在拆分前后都返回同一个单行。
- 不会创建 ProseMirror steps，因此协作不会看到任何变化。
- DOCX 导出和打印得到普通的表格行。

你可以在已拆分的行中输入、跨分页符选择内容并调整列宽。行会在编辑过程中拆分和重新合并。

## 哪些行可以拆分

拆分必须发生在两行之间。是否可以拆分取决于单元格内容的渲染方式，而不是节点类型列表，因此你自己的自定义节点无需注册即可工作。

实际上，当单元格包含段落、标题、项目符号或有序列表、嵌套列表、引用块、代码块或图片等行内内容时，行可以拆分。编号会跨分页符继续，图片会整体移动到下一页而不会被裁剪。

带有合并单元格的行也会以相同方式拆分，包括合并单元格覆盖的行。合并单元格会在下一页继续。

嵌套表格会在行之间拆分。能放在一页中的嵌套行会整体移动到下一页。高于一页的嵌套行会在与外层行相同的位置拆分，前提是该嵌套行自身可以拆分；如果不能，外层行会保持整体，如下所述。

以下情况下 Pages 不会拆分行：

- 行具有 `heightRule: "exact"`
- 单元格中的文本位于拥有自身布局的盒子内，但嵌套表格行除外

这包括使用 `display: flex`、`grid` 或 `flow-root`、裁剪溢出、多列、`contain: layout` 或绝对定位的盒子，也包括高于一页且无法拆分的嵌套行，例如设置了 `heightRule: "exact"` 的行。

无法拆分的行会保持现有行为，整体移动到下一页。

> **任务列表是特殊情况:**
>
> 任务项在文档中看起来像普通列表项，但会渲染为 flex 容器，分页符无法穿过它。包含任务项的行会保持整体。这就是规则根据渲染盒子而不是节点类型判断的原因：仅根据节点类型会得到错误结果。

## 设置拆分行样式

PagesTableKit 只负责布局，不绘制边框，因此拆分行跨过分页符的位置也不会自动绘制分隔线。

If your tables have borders and you want them carried across the break, set one custom property on the table:

```css
.my-document table {
  --pages-tablekit-border-color: #d5d5d5;
}
```

单元格内边距来自 ConvertKit，它会通过 `--cell-margin-left` 和 `--cell-margin-right` 发布每个单元格的实际内边距。如果其他样式为单元格添加了内边距，请设置 `--pages-tablekit-cell-padding-x` 覆盖两侧。

## 行元素由扩展管理

行拆分期间，其 NodeView 会拥有 `<tr>` 元素上的以下属性：

- `style`
- `data-height-rule`
- `data-pages-row-fragmentation`

不要在自己的代码中写入这些属性。NodeView 会在下一次布局时再次写入它们，两次写入会互相争夺，最终表现为闪烁。

你可以读取这些属性。拆分行带有 `data-pages-row-fragmentation="fragmented"`，其中每个单元格带有 `data-row-fragmentation-cell="fragmented"`，因此可以在 CSS 中定位它们。

## 限制

- 行只会在行与行之间或嵌套表格行之间拆分。单元格中的任务项或类似盒子会让整行保持整体。
- 能放在一页中的嵌套行永远不会拆分，而是整体移动到下一页。
- 如果表格列宽以折叠状态保存（例如宽度为一个像素），表格可能会渲染到行的右边缘之外，此时该行不会拆分。这是列调整造成的，而不是行分页拆分造成的；关闭选项时也会发生。
- 该功能需要 Pages 的[布局参与者](https://tiptap.zhcndoc.com/pages/core-concepts/layout-participants.md)循环，因此需要提供该循环的 Pages 版本。

## 工作原理

该行会注册为[布局参与者](https://tiptap.zhcndoc.com/pages/core-concepts/layout-participants.md)。每次分页更新后，它会测量页面边界，并在自己的单元格中对应位置放置空块。浏览器自身的换行会围绕这些空块移动文本，从而产生拆分效果。

它写入的所有内容都存在于编辑器视图中，而不是文档中。因此协作和导出不会受到影响。

## 相关内容

- [PagesTableKit](https://tiptap.zhcndoc.com/pages/guides/pages-tablekit.md)：在 Pages 中安装和设置表格。
- [页面中的表格](https://tiptap.zhcndoc.com/pages/guides/table-with-pages.md)：在 Pages 中使用表格的一般指南。
- [布局参与者](https://tiptap.zhcndoc.com/pages/core-concepts/layout-participants.md)：此功能使用的 API。
- [限制](https://tiptap.zhcndoc.com/pages/core-concepts/limitations.md)：Pages 可以和不能布局的内容。