允许 tr 和 td 元素内分页

Question

tr我正在尝试创建一个单列表格，允许在和单元格内分页td。下面只是一个示例，但我的实际表格的每个单元格内部都发生了很多事情。

<table>
  <thead>
    <tr>
      <th>TABLE HEADER</th>
    </tr>
  </thead>
  <tbody>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
  </tbody>
</table>

我使用以下样式来查看单元格的开始和结束位置：

.my-cell {
  padding: 160px 40px;
  border: 1px solid #000;
}

当我打印此页时，表格在第二行后中断，以避免拆分第三行：

我的目标是防止这种自动分页。我尝试添加以下 css，但它仍然在同一个地方中断：

tr, td {
  page-break-inside: initial;
}

无论如何，是否允许在tr和td元素内部分页，或者这是不可能的？这个属性实际上设置在哪里？它不会出现在 Chrome 开发人员工具或文档中的任何位置。

Answer 1

根据规范，该page-break-inside属性适用于块元素，尽管用户代理可以将其应用于其他元素：

用户代理必须将这些属性应用于根元素正常流中的块级元素。用户代理还可以将这些属性应用于其他元素，例如“table-row”元素。

因此，一种可能性（可能并不理想）是在打印时更改行的显示，以便它们而不是display: block默认的display: table-row。像这样的东西（这太笼统了，您可能需要使其更具体）：

@media print {
    tr {
        page-break-inside: initial;
        display: block;
    }
}

我测试过，它在 Chrome 和 Safari 上运行良好，但在 Firefox 上似乎不起作用：