html – 用于打印的表格行()上的分页符的防弹解决方案

几天后我们根据需要没有打破桌子.该解决方案适用于Firefox,但从未以更好的方式为我最喜欢的浏览器Chrome工作.到目前为止我们尝试过的是：

我们制作了一个.page-break类,并为不同级别的持有者制作了必要的CSS：

@media print{
   /* applied to our table */
   #report-table {
     /*-webkit-region-break-inside: auto; //tried for Chrome */
     page-break-inside:auto
  }

  /* applied to all our <tr> */
  #report-table tbody tr,#report-table .behave-tbody .behave-tr{
     /*-webkit-region-break-inside: avoid; //tried for Chrome */
     page-break-inside:avoid;
     break-after: auto;
     page-break-after: auto;
  }

  /* page break specific class */
  .page-break{
     break-after: always;
     /*-webkit-region-break-after: always; //tried for Chrome */
     page-break-after: always;
  }
}

到目前为止我们已经学习/找到了

>分页符适用于块级元素,例如< h1> < p为H.等等
>分页功能可以在Google Chrome for Table CSS中使用

记住它们我们以不同的方式进行：

步骤#1：使用< table>尝试解决方案< TR>

<table id="report-table">
        <thead>
        <tr>
            <th>Head</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Body Content</td>
        </tr>
        <tr class="page-break">
            <td>Body Content</td>
        </tr>
        <tr>
            <td>Body Content</td>
        </tr>
        </tbody>
    </table>

但这在Google Chrome中无效.即使我们已经了解到,<tr> itself is a block-level element.

第二步：绝对制作表格< div>基于

<style>
.behave-table{
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
}
.behave-thead{
    display: table-header-group;
}
/* th */
.behave-thead .behave-td{
    background-color: #ededed;
    font-weight: 700;
}
.behave-tbody{
    display: table-row-group;
}
.behave-tr{
    display: table-row;
}
.behave-td{
    display: table-cell;
    padding: 5px;
    vertical-align: top;
}
</style>
<div id="report-table" class="behave-table">
   <div class="behave-thead">
      <div class="behave-tr">
         <div class="behave-td">Head</div>
      </div> <!-- /.behave-tr -->
   </div><!-- /.behave-thead -->
   <div class="behave-tbody">
      <div class="behave-tr">
         <div class="behave-td">Body Content</div>
      </div> <!-- /.behave-tr -->
      <div class="behave-tr page-break">
         <div class="behave-td">Body Content</div>
      </div> <!-- /.behave-tr -->
      <div class="behave-tr">
         <div class="behave-td">Body Content</div>
      </div> <!-- /.behave-tr -->
   </div> <!-- /.behave-tbody -->
</div>

但这在Google Chrome中无效.

步骤#3：在表格单元格中输入块级元素

在the SO thread的指示下,我们在空白表格单元格中尝试了一个块级元素,如下所示：

<tr><td>Body Content</td></tr>
<tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr><td>Body Content</td></tr>

它部分工作,仅适用于第一页.我们尝试用Bootstrap .sr-only类隐藏笨拙的Text块但是它根本不起作用.我们尝试用& nbsp;替换“Next Section”. – 它也不行.

步骤#4：放置< div>使用已知的Block级别elem打破

<tr><td>Body Content</td></tr>
<div class="page-break"></div>
<tr><td>Body Content</td></tr>

但是你知道它不会起作用,因为< div>在表格内只能在表格单元格内工作：

What you need to do is make sure the div is inside an actual table cell,a td or th element
– 07002

后果

我们的桌子在Google Chrome中很难破解.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!