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 for print：

/********
 * 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

这是＆＃34;减少了一半＆＃34;在分页？所有浏览器都会测量＆＃34;一个页面＆＃34;不同。为了在桌子中间不中断，你需要让你的桌子在你想要的地方休息。可能是通过在原始表格中创建几个较小的表格。

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

1 个答案: