Table title break issue

[Subrato-maji]

Hi , I have a chrome.pdf templet , I want to populate data into the table without breaking its header and content. Every time if the data exceed the page height the header and data seems broken.
playground link:- https://playground.jsreport.net/w/Subrato-maji/epjb6cKz

[Subrato-maji]

[bjrmatos]

hi @Subrato-maji can you share a playground demo of the problem? the issues with chrome and table in pdf are tricky and it requires us to check the code in order to try to come up with a solution

[Subrato-maji]

here is the playground link: https://playground.jsreport.net/w/Subrato-maji/epjb6cKz

[bjrmatos]

I tried many things but nothing seems to work, so i ran out of ideas here. the problem is that you want to treat the tbody as a group (which contains two rows), but the chrome pdf layout algorithm at much considers each row alone as a group, so it can not keep both rows (from the body) together.

[Subrato-maji]

@bjrmatos Thank you for your valuable feedback,
Do you have any other design approach for counter this issue?

[bjrmatos]

hmm actually I have no idea, perhaps you can try to apply some top padding to the cells, so you can make some space for the header to be, then you need to find some way to place the "united States of America" content there, perhaps with some position: absolute trick.

<style>
  .td {
     padding-top: 45px; /* use a value that make the cells to have some blank space at the top  */
   }

   /* find a way to place the header in this space, perhaps with position absolute */
</style>

<tr>
  <td>
    james bond
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>