Print page issue in landscape and portrait view

Question

I have created a common component, across the application, to print the table. The table consists of multiple rows and columns. When the data is any cell is huge, each row is taking one complete page and the next row is getting printed on the next page. Due to this issue, empty space is getting created between the rows. I tried altering the column widths to get the look and feel but didn't help. So request your help providing a solution to print the table data without spaces issue. Below is my code

th {
    border: 1px solid #e2e2e2;
    border-collapse: collapse;
    padding: 5px; 
}
td {
    border: 1px solid  #e2e2e2;
    word-break: break-word;
    text-align: left;
    white-space: pre-wrap; 
}
.printPag {
    font-family: "calibri" !important;
    margin: 0.5cm 2cm;
    font-size: 10pt;
}
table
 {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    border: 1px solid #e2e2e2;
    text-align: left;
    font-size: 8pt;
}

 Below is my code

    <table class="printPageTable" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
      <th *ngFor="let header of labels">
        {{ header.labels }}
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of tableData">
    <td *ngIf="data.tableDataCol_1 != undefined">
        <p *ngFor="let columnData of data.tableDataCol_1">
          {{ columnData }}
        </p>
    </td>
    </tr>
    </tbody>
    </table>

enter image description here