允许 tr 和 td 元素内的分页符

Posted 2023-03-06

【中文标题】允许 tr 和 td 元素内的分页符

【英文标题】：Allow page breaks inside tr and td elements

【发布时间】：2019-05-12 01:18:02

【问题描述】：

我正在尝试创建一个允许在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 开发者工具或文档中的任何位置。

【参考方案1】：

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

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

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

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

我测试过，它在 Chrome 和 Safari 上运行良好，但在 Firefox 上似乎无法运行：

【参考方案2】：

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

 page-break-inside : auto | avoid

Id 图 Auto 可能会有所帮助。

【讨论】：

我把它应用到了 tr 和 huzzah。

【参考方案3】：

我玩弄了一段时间，最终得出结论，最干净的解决方案是将我的表格转换为 divs 和 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/