htmlcssprintinghtml-tablepage-break

<tr> squeezed when <tbody> is display:block

I need to add a display block to my tbody in order to make my page-break-inside working.

When I do that, the page break works on printing, but the table's shape is modified for one specific tbody.

html:

<div class="row section-content">
   <table>
      <tbody class="subsection">
         <tr>
            <th colspan="2">Personal infos</th>
         </tr>
         <tr class="check">
            <td class="control-title">Is licensed</td>
            <td class="check-body control-body">false</td>
         </tr>
         <tr class="text">
            <td class="control-title">First name</td>
            <td class="text-body control-body"> Gc yt?tv</td>
         </tr>
         <tr class="text">
            <td class="control-title">Last name</td>
            <td class="text-body control-body">Bhvug7y</td>
         </tr>
         <tr class="text">
            <td class="control-title">Adress</td>
            <td class="text-body control-body">Guvyb</td>
         </tr>
         <tr class="radioBtn">
            <td class="control-title">Wants to suscribe to monthly discount</td>
            <td class="radio-body control-body">No</td>
         </tr>
         <tr class="number">
            <td class="control-title">Annual household income</td>
            <td class="number-body control-body">10</td>
         </tr>
      </tbody>
      <tbody class="subsection">
         <tr>
            <th colspan="2">Accomodation</th>
         </tr>
         <tr class="gps">
            <td class="control-title">Location</td>
            <td class="gps-body control-body">55.8755037, -4.2547716</td>
         </tr>
         <tr class="number">
            <td class="control-title">Iso reference</td>
            <td class="number-body control-body">15</td>
         </tr>
         <tr class="radioBtn">
            <td class="control-title">Accomodation type</td>
            <td class="radio-body control-body">House</td>
         </tr>
      </tbody>
   </table>
</div>

Before: enter image description here]

After with display block: enter image description here

Solution

  • I do had the same problem and after searching all over i found a solution for my problem which is, first add a class to table which you dont want to break while printing like unbreakable now add css 

    .unbreakable td{
    width: 100% !important;
}
.unbreakable tr{
    page-break-inside: avoid !important;
}

    It worked fine for me hope it works for you too... :) Thanks...