打印预览页面中间的表格中断

Question

我想在表中打印数据，但是在查看打印预览时，表中断发生在页面中间，并开始了一个新表，表和表之间有一定间隔。

如果我在表上使用分页符，则会出现波纹管问题（在图中指出）。

如果我对表行使用分页符，则下面的问题（在图片中指出）消失了，并且表行在内部中断。

HTML code:

<ng-container *ngIf="scheduleType == 'comparison'">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <table class="table work-packages">
                  <tr class="header" style="text-align:center;">
                    <th colspan="3" i18n="@@activityName">Activity Name</th>
                    <th i18n="@@plannedStartDate">Planned Start Date</th>
                    <th i18n="@@plannedEndDate">Planned End Date</th>
                    <th i18n="@@actualStartDate">Actual Start Date</th>
                    <th i18n="@@actualEndDate">Actual End Date</th>
                    <th i18n="@@float">Float</th>
                    <th i18n="@@status">status</th>
                    <th i18n="@@amountOfWorkRemaining">Physical Complete</th>
                  </tr>
                  <tbody>
                    <ng-container *ngFor="let workPackage of $workPackages | async">
                      <tr class="workPackages">
                        <td colspan="3">{{ workPackage.name }}</td>
                        <td>
                          <span *ngIf="workPackage.work_package_details[1]">
                            {{(workPackage.work_package_details[1]?.start_date)? (workPackage.work_package_details[1]?.start_date|convertToJalaliDate):
                            '----'}}
                          </span>
                          <span *ngIf="!workPackage.work_package_details[1]">----</span>
                        </td>
                        <td>
                          <span *ngIf="workPackage.work_package_details[1]">
                            {{(workPackage.work_package_details[1]?.end_date)? (workPackage.work_package_details[1]?.end_date|convertToJalaliDate): '----'}}
                          </span>
                          <span *ngIf="!workPackage.work_package_details[1]">----</span>
                        </td>
                        <td>
                          <span *ngIf="workPackage.work_package_details[0]">
                            {{(workPackage.work_package_details[0]?.start_date)? (workPackage.work_package_details[0]?.start_date|convertToJalaliDate):'----'}}
                          </span>
                          <span *ngIf="!workPackage.work_package_details[0]">----</span>
                        </td>
                        <td>
                          <span *ngIf="workPackage.work_package_details[0]">
                            {{(workPackage.work_package_details[0]?.end_date)? (workPackage.work_package_details[0]?.end_date|convertToJalaliDate): '----'}}
                          </span>
                          <span *ngIf="!workPackage.work_package_details[0]">----</span>
                        </td>
                        <td>{{workPackage.float}}</td>
                        <td>
                          <span class="badge badge-secondary" *ngIf="workPackage.work_package_details[0]?.status == 0">Not Started</span>
                          <span class="badge badge-warning" *ngIf="workPackage.work_package_details[0]?.status == 1">In Progress</span>
                          <span class="badge badge-success" *ngIf="workPackage.work_package_details[0]?.status == 2">Completed</span>
                        </td>
                        <td>
                          {{(workPackage.work_package_details[0]?.completion_percentage > 0)? workPackage.work_package_details[0]?.completion_percentage
                          : 0}}%
                        </td>
                      </tr>
                      <ng-container *ngIf="workPackage?.subtasks">
                        <tr class="subtask" *ngFor="let subtask of workPackage.subtasks">
                          <td colspan="3">{{ subtask.name }}</td>
                          <td>
                            <span *ngIf="subtask.planned_subtask != null">
                              {{subtask.planned_subtask?.start_date | convertToJalaliDate}}
                            </span>
                            <span *ngIf="subtask.planned_subtask == null">----</span>
                          </td>
                          <td>
                            <span *ngIf="subtask.planned_subtask != null">
                              {{subtask.planned_subtask?.end_date | convertToJalaliDate}}
                            </span>
                            <span *ngIf="subtask.planned_subtask == null">----</span>
                          </td>
                          <td>
                            {{subtask?.start_date | convertToJalaliDate}}
                          </td>
                          <td>
                            {{subtask?.end_date | convertToJalaliDate}}
                          </td>
                          <td>{{subtask.float}}</td>
                          <td>
                            <span class="badge badge-secondary " *ngIf="subtask.status==0">Not Started</span>
                            <span class="badge badge-warning " *ngIf="subtask.status==1">Started</span>
                            <span class="badge badge-success" *ngIf="subtask.status==2">Completed</span>
                          </td>
                          <td>
                            {{(subtask.completion_percentage > 0)? subtask.completion_percentage : 0}}%
                          </td>
                        </tr>
                      </ng-container>
                    </ng-container>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </ng-container>

@import '~bootstrap/scss/functions';
@import '~style/variables';
table th,
td {
  border: 1px solid black !important;
}

@media print {
  table {
    page-break-after: auto
  }
// tr {
  //   page-break-inside: avoid;
  //   page-break-after: always
  // }
}

.table tr.subtask td:nth-child(1) {
  padding-left: 25px !important;
}

.table tr.subtask td.milestone {
  padding-left: 20px !important;
}

.table td {
  font-size: 10px !important;
  text-align: left !important;
  vertical-align: inherit !important
}

.table th {
  font-size: 0.7rem !important;
}

.table .workPackages {
  background-color: #3f51b5;
  color: #fff;
}

.header {
  border-radius: 2px !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: rgba(250, 250, 250, 0.9) !important;
}

问题出在指向区域，我想删除那里的分页符：