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属性适用于块元素，尽管用户代理可以将其应用于其他元素：

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

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

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

我进行了测试，它在Chrome和Safari上可以正常运行，但在Firefox上似乎不起作用：

Answer 2

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

 page-break-inside : auto | avoid

自动识别数字可能会有所帮助。

Answer 3

我玩了一段时间，最后得出结论，最干净的解决方案是将表转换为div布局的flex。

它看起来像这样：

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元素内允许分页符

3 个答案: