How to Fix this problem in Print page Ctrl+P?

Question

I have a cards of tables , each table contain a numbers of chairs cards I need to display them with no cutting in cards after new page and complete de table i+1 just after table i how to fix this problem , i have to complete the current page by Table 7 and not skip to the current page to diplay It , and the cards should be not cutting by new page , any solution ?Thanks

header {
  background: #563d7c;
  padding: 2em 1em;
  color: #fff;
  margin-bottom: 2em;
  h1 {
    font-weight: 200;
  }
}

.card {
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  img {
    width: 100%;
  }
}

[class*="row"] {
  margin-bottom: 1em;
  justify-content: center;
}

[class*="col-"] {
  background: #efefef;
  border: 1px solid #ddd;
  padding-top: .75rem;
  padding-bottom: .75rem;
  width: 100%;
}

@media print {
  .container-fluid {
    page-break-inside: avoid;
  }
}

<header role="banner">
  <h1>Mc donald food
  </h1>
</header>

<div class="container-fluid" style="page-break-inside: avoid;page-break-after: avoid;" *ngFor="let table of tables">
  <h2>Table {{table.tableNumber}} :</h2>
  <div class="row" style="page-break-before: avoid;">
    <div *ngFor="let c of getArrayFromNumber(table.capacity);let j = index  ">
      <div class="card">
        <qrcode [qrdata]="urldata+'main/foodBusiness/'+food+'/orders/create?orderType=DineIn&tableId='+table.tableId+'&chairNumber='+inc(j)" [width]="widthCodeQr" [errorCorrectionLevel]="'M'"></qrcode>
        <div>
          <h4>{{ 'table.tablenum' | translate }} : {{table.tableNumber}}</h4>
          <p>{{ 'table.chair' | translate }}: {{j+1}}</p>

        </div>

      </div>
    </div>
  </div>
</div>