允许在 tr 和 td 元素内分页

Question

我正在尝试创建一列 table，允许在 tr 和 td 单元格内进行分页。下面只是一个示例，但我的实际 table 每个单元格内部都有很多内容。

<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;
}

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

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

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

是否允许在 tr 和 td 元素内进行分页，或者这是不可能的？这个属性实际设置在哪里？它没有出现在 chrome 开发人员工具或文档中。

Answer 1

https://css-tricks.com/almanac/properties/p/page-break/

 page-break-inside : auto | avoid

我认为 Auto 可能会有所帮助。

Answer 2

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

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 上似乎不起作用：

Answer 3

我研究了一段时间，最终得出结论，最干净的解决方案是将我的 table 转换为具有 flex 布局的 divs。

看起来有点像这样：

CSS

.table {
   display : flex;
   flex-direction : column;
}

.row {
   display : flex;
   flex-direction : row
}

.cell {
  border : 1px solid #dddddd;
  margin-right : -1px;
  margin-bottom : -1px;
  padding : 3px;
}

.col1 {
   width : 200px;
   flex-shrink : 0;
}

.col2 {
   width : 150px;
   flex-shrink : 0;
}

.col3 {
   width : 150px;
   flex : 1 1 auto;
}

HTML

<div class="table">
   <div class="row">
      <div class="col1 cell">Column 1</div>
      <div class="col2 cell">Column 2</div>
      <div class="col3 cell">Column 3</div>
   </div>
   <div class="row">
      <div class="col1 cell">Column 1</div>
      <div class="col2 cell">Column 2</div>
      <div class="col3 cell">Column 3</div>
   </div>
</div>

查看工作示例：https://jsfiddle.net/nqcf6x1g/1/

允许在 tr 和 td 元素内分页

Allow page breaks inside tr and td elements

html

css

printing

html-table

page-break