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

下表生成了大约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>

---

这是在分页符处“对半剪切”吗？所有浏览器对“页面”的测量方式都不同。为了不在桌子中间休息，你需要在你想要的桌子上做一个桌子。可能是在原始表的基础上创建几个较小的表。

您的意思是我应该以编程方式完成吗？例如，页面可以包含20行，而不中断每21行的剪切。我应该在第20行、第40行等后面插入分页符吗？请提供一些示例或JS fiddle，好吗？阻止在不需要的区域中断的一种方法是，强制表格在您希望的位置中断，然后在下一页重新启动表格。棘手的事情是找出打破表格的地方，因为所有浏览器对页面的测量都不同。因此，您可以在之后使用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;
}