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

Posted 2023-03-06

【中文标题】用于打印的表格行 (<tr>) 分页的防弹解决方案

【英文标题】：Bullet proof solution for page break on table row (<tr>) for printing

【发布时间】：2016-10-30 08:05:42

【问题描述】：

我们没有按照我们的需要打破桌子，这已经是日复一日了。该解决方案适用于 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 中的分页符有问题

牢记它们，我们采取了不同的方式：

第 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 类隐藏尴尬的文本块，但它根本不起作用。我们尝试将“下一节”替换为   - 它也不起作用。

第 4 步：使用已知的块级元素放置 <div> 以中断

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

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

您需要做的是确保 div 位于实际的表格单元格、td 或 th 元素内​​m>- Chris Coyier

后果

我们未能在 Google Chrome 中很好地打破我们的表格。 :(

【参考方案1】：

这不太好，但您可以尝试为每一行使用单独的表格。通过使用以下语法，您可以确保以相同的宽度呈现列。

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

<table>
    <colgroup>
        <col  />
        <col  />
        <col  />
    </colgroup>
    <tr>
        <td>Narrow column</td>
        <td>Wide column</td>
        <td>Narrow column</td>
    </tr>
</table>
<!-- can break -->
<table>
    <colgroup>
        <col  />
        <col  />
        <col  />
    </colgroup>
    <tr>
        <td>Narrow column</td>
        <td>Wide column</td>
        <td>Narrow column</td>
    </tr>
</table>

【讨论】：

除此之外，我没有发现任何可接受的解决方案。谢谢你。但是浏览器应该处理这个问题——在每个项目中这对我们来说都很烦人。 :(