用于打印的表行（）上的分页符的防弹解决方案

Question

根据我们的需要，我们几天都没有打破桌子。该解决方案适用于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>等块级元素。
• Page break在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>

但这并不适用于谷歌浏览器。即使我们已经了解到，<tr> itself is a block-level element。

步骤2：使表格<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>

但这在谷歌浏览器中无效。

步骤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类隐藏笨拙的文本块，但是它完全没有用。我们尝试更换＆＃34; Next Section＆＃34;与 一起 - 它也有用。

步骤＃4：使用已知的Block-level elem放置<div>以打破

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

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

  

您需要做的是确保div位于实际的表格单元格，td或th元素中 - Chris Coyier

后果

我们失败我们的表格在Google Chrome中很好地破解了。 ：（

Answer 1

这不好，但你可以尝试使用每行的分离表。通过使用以下语法，您可以确保以相同的宽度呈现列。

<style>
    table {
        page-break-inside: avoid;
    }
</style>

<table>
    <colgroup>
        <col width="25%" />
        <col width="50%" />
        <col width="25%" />
    </colgroup>
    <tr>
        <td>Narrow column</td>
        <td>Wide column</td>
        <td>Narrow column</td>
    </tr>
</table>
<!-- can break -->
<table>
    <colgroup>
        <col width="25%" />
        <col width="50%" />
        <col width="25%" />
    </colgroup>
    <tr>
        <td>Narrow column</td>
        <td>Wide column</td>
        <td>Narrow column</td>
    </tr>
</table>