html - 允许在 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

根据specs , page-break-inside 属性应用于 block 元素，尽管用户代理可以将它应用于其他元素:

User Agents must apply these properties to block-level elements in the normal flow of the root element. User agents may also apply these properties to other elements, e.g., 'table-row' elements.

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

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

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