The table shown in the image is experiencing issues with applying CSS properties when printing. While the background graphics feature has been enabled, the preview section still does not reflect the CSS styling. What could be causing this discrepancy?

Click here to view the image

Below is my HTML code:

<div class="container-fuild ml-3 mr-3">
    <mat-card>
      <mat-card-content *ngIf="reportingDataModel?.searchList.length>0 && reportingDataModel?.calculationList.length>0 ">
         <div class="row">
        <div class="col-md-12">
          <div class="table-responsive">
            <div class="tableFixHead">
              <div class="table text-center">
                <table class="table table-bordered border border-secondary" id="save-stage48">
                  <thead id="tableHeadRow" role="row"> 
                    <tr>
                      <th>#</th>
                      <th>{{ 'MeasurementPoints' | translate }}</th>
                        <th   *ngFor="let searchList of reportingDataModel?.searchList; let i = index">
                          <div>{{ searchList.worOrderName }}</div>
                          <div>{{ searchList.measurementTypeName }}</div>
                          <div>{{ searchList.widthAndShrink }}</div>
                          <div *ngIf="searchList.reportType === 1">{{ searchList.sizeId }} {{ "Size" | translate }}</div>
                        </th>
                      <th>{{ 'averagetolerance' | translate }}</th>
                      <th   >
                        {{averageWidth}}
                        <br>
                        {{'decidetolerance' | translate}}
                      </th>
                      <th>{{ 'Description' | translate }}</th>
                    </tr>
                  </thead>
                  <tbody >
                    <ng-container *ngFor="let calculation of reportingDataModel?.calculationList[0]; let i = index">
                      <tr >
                        <td style=""> {{i+1}} {{incomingName}} </td>
                        <td style="" [id]="calculation?.id">{{calculation?.measurementPointName}}</td>
                        <ng-container *ngFor="let calculations of reportingDataModel?.calculationList; let j = index">
                          <td>{{reportingDataModel?.calculationList[j][i].appliedPullTolerance}}</td>
                        </ng-container>
                        <td >{{calculaterAverageTolerance(i)}}</td>
                        <td></td>
                        <td rowspan="3"> <textarea name="" id="" cols="15" rows="3"></textarea></td>
                      </tr>
  
                      <ng-container *ngIf="i <= reportingDataModel?.calculationList[0].length">
                          <tr >
                            <td style="white-space:nowrap">{{i+1}} {{incomingNameTwo}}</td>
                            <td style="text-align:start">{{calculation?.measurementPointName}}</td>
                            <ng-container *ngFor="let calculations of reportingDataModel?.calculationList; let j = index">
                              <td>{{reportingDataModel?.calculationList[j][i].actualPullTolerance}}</td>
                            </ng-container>
                            <td>{{calculaterActualPullTolerance(i)}}</td>
                            <td><input type='number' style="width:50%"  step="0.1" [value]="total"/></td>
                          </tr>
  
                          <tr>
                            <td style="white-space:nowrap">{{i+1}} {{"Avg."}}</td>
                            <td style="text-align:start">{{calculation?.measurementPointName}}</td>
                            <ng-container *ngFor="let calculations of reportingDataModel?.calculationList; let j = index">
                              <td>{{reportingDataModel?.calculationList[j][i].averageValue}}</td>
                            </ng-container>
                            <td >{{calculaterAverageValue(i)}}</td>
                            <td></td>
                          </tr>
                      </ng-container>
                    </ng-container>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

My CSS code:

.table.text-center th,
.table.text-center td {
text-align: center;
}

#save-stage48 tbody tr td {
padding: 0 0.313rem;
height: 1.563rem;
vertical-align: middle;
text-align: center;
}

#save-stage48, #save-stage48 td, #save-stage48 tr {
border: 0.031rem solid black;
}

#save-stage48 th {
border: 0.063rem dashed black;
}

#save-stage48 th {
white-space: nowrap;
text-align: center;
}

#save-stage48 td {
padding: 0.5rem 0;
}

#save-stage48 {
border-collapse: collapse;
}

.tableFixHead {
overflow-y: auto;
overflow-x: auto;
height: 80%;
width: 100%;
}

.tableFixHead th {
background-color: rgba(245, 245, 245, 1) !important;
color: #666 !important;
}

.tableFixHead thead tr th {
position: sticky;
top: 0;
}

#save-stage48 tbody tr:nth-child(3n+1) {
background-color: rgba(112, 128, 144, 1) !important;
color: white !important;
}

#save-stage48 tbody tr:nth-child(3n+2) {
background-color: rgba(148, 164, 179, 1) !important;
color: white !important;
}

#save-stage48 tbody tr:nth-child(3n+3) {
background-color: rgba(171, 186, 199, 1) !important;
color: white !important;
}

.dataTables_wrapper {
padding: 0 !important;
font-size: 0.688rem !important;
font-weight: bold;
}

#save-stage48 tbody tr:nth-of-type(3n) td {
border-bottom: 0.375rem solid white;
}

#save-stage48 tbody tr td:first-child {
border-left: 0.375rem solid white;
}

#save-stage48 tbody tr:nth-of-type(3n+1) td:last-child, tr:first-child td:last-child {
border-right: 0.375rem solid white;
border-bottom: 0.375rem solid white;
}