1

I have an HTML page displaying a dynamic table and summarised data at the end. When there is a lot of data, the rows extend to another page. I used page-break-inside : avoid; in a div so that elements won't break in the middle.
I used to count the number of rows that will fit in the page and use page-break and then repeat the header in it. But now the main problem is that user may enter data in multiple lines in a single row thus counting rows fails here.
Is there a way to detect page break and add a header that repeats in all pages, or any other workaround?

HTML simply goes like this

<div class="page-break-avoid">
  <table>
    <tr>
      <th> Sno </th>
      <th> Name </th>
      <th> col 3 </th>
    </tr>
  </table>
  {{#each items}} 
    <table>
      <tr>
        <td> {{Sno}} </td>
        <td> {{name}} </td>
        <td> {{sth}} </td>
      </tr>
    </table>
  {{/each}}
</div>

and CSS

.page-break-avoid {
    page-break-inside: avoid;
}

I want page like this, I need a table header after a page break and before other data

Help will be much appreciated, thanks in advance.

Hardik Upadhyay
  • 2,639
  • 1
  • 19
  • 34
Trend74X
  • 162
  • 1
  • 10
  • Please provide your code so we might better assist you & get an understanding of the issues you are describing. – EGC Jan 30 '20 at 05:32
  • What you're calling a page break is basically the viewport height. So I would take a look at this: https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions – gforce301 Jan 30 '20 at 05:32
  • @EGC I added asimple code to show how i did it – Trend74X Jan 30 '20 at 05:55
  • 1
    Try to use ``: https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode – pgeimer Feb 12 '20 at 15:34

0 Answers0