Table in HTML how to avoid page break inside row

Question

I have a HTML table in my APEX application. I created a feature to export that table to PDF file, but I struggle with page break. How to avoid breaks in the table?

I tried below CSS but it ruined my table, it messed up all columns

tr td{
    page-break-inside: avoid;
}

My code:

htp.p('
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;width: 100%;}
.tg td{border-color:black;border-style:solid;border-width:0px;border-right: solid 1px #000000; border-left: solid 1px #000000; font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:1px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:1px 5px;word-break:normal;}
.tg .tg-c{background-color:#FFF;color:#161513;font-size:10px;text-align:center;vertical-align:top;}
.tg .tg-c_header{background-color:#FFF;color:#161513;font-size:12px;text-align:center;font-weight:bold;vertical-align:top}
.tg .tg-r{background-color:#FFF;color:#161513;font-size:10px;text-align:right;vertical-align:top; }
.tg .tg-l{background-color:#FFF;color:#161513;font-size:10px;text-align:left;vertical-align:top; }

tr:last-child td {
    border-bottom: solid 1px #000000;
}

tr td{
    page-break-inside: avoid;
}



</style>

<table class="tg">
<thead>
  <tr>
    <th class="tg-c_header">A</th>
    <th class="tg-c_header">B</th>
    <th class="tg-c_header">C</th>
    <th class="tg-c_header">D</th>
  </tr>
</thead>
<tbody>');

   // for i in(some pl/sql code...)
   // loop
htp.p('
        <tr>
            <td class="tg-l">'||i.a||'</td>
            <td class="tg-l">'||i.b||'</td>
            <td class="tg-c">'||i.c||'</td>
            <td class="tg-r">'||i.d||'</td>

        </tr >');
    end loop;
    htp.p('
    <tbody>
</table>');
end;