html - 打印 CSS - 如何避免在长表格的页面末尾进行行切割？

Question

我有下表，它生成大约 200 行。这些行的样式使用 @media print CSS 问题是生成的文件包含被切成两半的行(见下图)。

请问如何避免这种剪成两半的情况？ (应剪切的行应放在新页面上(最好在 ) 之后)。

非常感谢您的任何建议。

模板代码如下:

<table class="content-table">
  <thead class="mdt-heading-meal-type mdt-heading-row">
  <tr>
  <td>
    &nbsp;
  </td>
  <td>
    Breakfast
  </td>
  <td>
    Lunch
  </td>
  <td>
    Dinner
  </td>
  <td>
    Snack
  </td>
  </tr>
  </thead>
  <tfoot>
  <td>Footer</td>
  </tfoot>
  <tbody>
  <!--CONTINENT -->
  <tr ng-repeat-start="row in rowsMeal track by $index" class="mdt-row-country">
    <td class="mdt-col-country-heading" colspan="5">{{row.caption}}</td>
  </tr>
  <!--COUNTRY -->
  <tr ng-repeat-start="country in row.countries" class="mdt-border-line-bottom mdt-row-country">
    <td class="row-padding-1st-level">{{country.caption}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{country.breakfast}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{country.lunch}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{country.dinner}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{country.snack}}</td>
  </tr>
  <!--SUBLOCATIONS-->
  <tr ng-repeat-end ng-repeat="sublocation in country.sublocations" class="mdt-border-line-bottom mdt-row-country row-padding-price-1st-level">
    <td class="row-padding-2nd-level">{{sublocation.caption}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{sublocation.breakfast}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{sublocation.lunch}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{sublocation.dinner}}</td>
    <td class="row-padding-price-1st-level"><span>{{reportCurrency.caption}}</span> {{sublocation.snack}}</td>
  </tr>
  <tr ng-repeat-end></tr>
  </tbody>
</table>

用于打印的 CSS:

/********
 * Print
 ********/

@media print {
  //First of all set all as invisible
  body{
    visibility: hidden;
  }

  #meals-limit-report {
    width: 100%;
    visibility: visible !important;
    top: 0 !important;
    position: absolute !important;
    -webkit-print-color-adjust: exact;
  }

  .mdt-ultra-light-blue {
    background-color: #7ed3f7 !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-light-blue {
    background-color: #00b5ef !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-medium-blue {
    background-color: #005c97 !important;
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-blue {
    background-color: #001f4c !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-white {
    color: #fff !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-yellow {
    color: #ffce00 !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-border-line-bottom {
    border-bottom: solid #b1b3b3 1px;
    color: #000;
    -webkit-print-color-adjust: exact;
  }
  .mdt-col-country-heading {
    color: #b0008e !important;
    border-bottom: solid #53565a 2px !important;
    vertical-align: bottom !important;
    -webkit-print-color-adjust: exact;
  }
  .mdt-heading-1-col {
    width: 60% !important;
  }
  .mdt-heading-2-col {
    width: 15% !important;
  }
  .mdt-heading-3-col {
    width: 20% !important;
  }
  .mdt-heading-text-meal {
    margin-left: 55px;
    margin-top: 0;
    position: absolute;
  }
  .mdt-row-country {
    height: 10mm !important;
  }

  table { page-break-inside:auto }
  tr    { page-break-before:always;page-break-inside:avoid; page-break-after:always }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}

@page {
  size: letter portrait;
}

Answer 1

这是在分页处“减半”吗？所有浏览器都以不同方式衡量“页面”。为了在 table 中间没有中断，您需要让您的 table 在您想要的地方中断。可能通过从原始表中创建几个较小的表。