避免打印带有行距的表格中的分页符

时间:2019-07-09 16:01:28

标签: html printing html-table bootstrap-4 bootstrap-table

当打印页面中断时,表行将溢出表头。我尝试了page-break-inside:避免,但不起作用。

screenshot

添加了一些代码,它是动态更改的。在打印中,当页面断点位于行跨部分时,总是会引起问题。

    <table class="table table-bordered reportTable" id="contentToConvert">
      <thead style="text-align: center" class="report-container">
        <tr>
          <th scope="col" rowspan="2" style="width: 10%; vertical-align: middle;">Order #</th>
          <th scope="col" rowspan="2" style="width: 20%; vertical-align: middle;">Customer Information</th>
          <th scope="col" rowspan="2" style="width: 9%; vertical-align: middle;">Package(s)</th>
          <th scope="col" colspan="5" style="width: 61%; vertical-align: middle;">Package Information</th>
        </tr>
        <tr>
          <th style="width: 17%; vertical-align: middle">Tracking Number</th>
          <th style="width: 10%; vertical-align: middle">Size</th>
          <th style="width: 10%; vertical-align: middle">Weight</th>
          <th style="width: 14%; vertical-align: middle">Instructions</th>
          <th style="width: 10%; vertical-align: middle">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3" style="text-align: center; padding-left: 0rem; padding-right: 0rem">RetailOrder_0023
          </td>
          <td rowspan="3" style="padding-left: 1rem">
            George Jason <br>
            123 Arlington street <br>
            Arlington VA 22222<br>
            123-456-7890<br>
            GEORGE.Jason@gmail.com
          </td>
          <td rowspan="3" style="text-align: center">3</td>
          <td style="text-align: center; vertical-align: middle; padding: 0">5134134231231261341231</td>
          <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
          <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
          <td style="text-align: center; vertical-align: middle"></td>
          <td style="text-align: center; vertical-align: middle">Delivered</td>
        </tr>
        <tr>
          <td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
          <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
          <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
          <td style="text-align: center; vertical-align: middle">Leave at front door</td>
          <td style="text-align: center; vertical-align: middle">Delivered</td>
        </tr>
        <tr>
          <td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
          <td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
          <td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
          <td style="text-align: center; vertical-align: middle"></td>
          <td style="text-align: center; vertical-align: middle">Delivered</td>
        </tr>
      </tbody>
    </table>

0 个答案:

没有答案