用于打印的表行(<tr>)上的分页符的防弹解决方案

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>.
• 分页功能可在Google Chrome for Table CSS中使用

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

第一步:尝试解决方案 <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>它本身就是一个块级元素.

第二步:制作绝对<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:在表格单元格中输入块级元素

在SO线程的指导下,我们在空白表格单元格中尝试了一个块级元素,如下所示:

<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块但是它根本不起作用.我们试图将"下一部分"替换为 - 它也不起作用.

步骤#4:<div>使用已知的Block级别elem 放置一个中断

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

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

什么,你需要做的就是确保在div是一个实际的表格单元格,一个TD或th元素里
- 克里斯Coyier

后果

我们失败了我们的餐桌在谷歌浏览器很好的突破.:(

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>