Print Preview changes html layout - html

Question

I need to create a print preview of a receipt with a custom layout and ultimately print it. But my issue is; when I view it in my print preview, it is rendered differently from the layout I have created prior to clicking the 'Print Preview' button. In the sections where I used a table element, in my layout, I get the layout that I want, but in the print preview, the table shrinks. Please see my html codes below:
<div id="print-section" *ngIf="propertyLedger">
<h2>SPMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col=md-2" style="text-align: left;">Amount</th>
<td>{{ sumPayment() | currency: 'PHP ' }}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<table class="table borderless" *ngIf="PropertyLedgerDetails">
<thead>
<tr>
<th class="col-md-2" style="text-align: left;">Transaction Type</th>
<th class="col-md-2" style="text-align: left;">Amount</th>
<th class="col-md-2" style="text-align: left;">Month</th>
<th class="col-md-2" style="text-align: left;">Year</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let pd of PropertyLedgerDetails">
<td>{{pd.TransactionType}}</td>
<td>{{pd.Amount | currency: 'PHP '}}</td>
<td>{{pd.Month}}</td>
<td>{{pd.Year}}</td>
</tr>
</tbody>
</table>
<hr>
</div>
<br>
<button mat-raised-button color="default" class="btn pull-right" (click)="print()">Print</button>
before print preview
As soon as I click the Print Preview button (Print) this is what I get:
Can you please show me how to this right? Thank you so much for your help.
EDIT
I created a css like this
#media screen, print {
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 50%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 15%;
}
th, td {
padding: 20px;
}
}
I have to add this style in the part where I need to print the html.

Answer 1

Can you provide more details as to what is not the same? As per the running example bellow when you click on the print and the print preview shows ... they look pretty close to me.
#media screen,
print {
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 50%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 15%;
}
th,
td {
padding: 20px;
}
}
<div id="print-section" *ngIf="propertyLedger">
<h2>SPMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2" style="text-align: left;">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col=md-2" style="text-align: left;">Amount</th>
<td>{{ sumPayment() | currency: 'PHP ' }}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<table class="table borderless" *ngIf="PropertyLedgerDetails">
<thead>
<tr>
<th class="col-md-2" style="text-align: left;">Transaction Type</th>
<th class="col-md-2" style="text-align: left;">Amount</th>
<th class="col-md-2" style="text-align: left;">Month</th>
<th class="col-md-2" style="text-align: left;">Year</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let pd of PropertyLedgerDetails">
<td>{{pd.TransactionType}}</td>
<td>{{pd.Amount | currency: 'PHP '}}</td>
<td>{{pd.Month}}</td>
<td>{{pd.Year}}</td>
</tr>
</tbody>
</table>
<hr>
</div>
<br>
<button mat-raised-button color="default" class="btn pull-right" onclick="window.print()">Print</button>