repeating table header on page break

See original GitHub issue

Hi guys, I have a table like below very simple, I am trying to get repeating table headers for every time it goes to a new page, how can I do this, currently it just overflows to the next page with a row looking as it is being cut-off?

<table class="tg">
    <thead>
        <tr>
            <th class="tg-baqh" colspan="6">Results</th>
        </tr>
        <tr>
            <td class="tg-hmp3">No</td>
            <td class="tg-hmp3">Competition</td>
            <td class="tg-hmp3">John</td>
            <td class="tg-hmp3">Adam</td>
            <td class="tg-hmp3">Robert</td>
            <td class="tg-hmp3">Paul</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tg-0lax">1</td>
            <td class="tg-0lax">Swimming</td>
            <td class="tg-lqy6">1:30</td>
            <td class="tg-lqy6">2:05</td>
            <td class="tg-lqy6">1:15</td>
            <td class="tg-lqy6">1:41</td>
        </tr>
        <tr>
            <td class="tg-hmp3">2</td>
            <td class="tg-hmp3">Running</td>
            <td class="tg-mb3i">15:30</td>
            <td class="tg-mb3i">14:10</td>
            <td class="tg-mb3i">15:45</td>
            <td class="tg-mb3i">16:00</td>
        </tr>
        <tr>
            <td class="tg-0lax">3</td>
            <td class="tg-0lax">Shooting</td>
            <td class="tg-lqy6">70%</td>
            <td class="tg-lqy6">55%</td>
            <td class="tg-lqy6">90%</td>
            <td class="tg-lqy6">88%</td>
        </tr>
        <tr>
            <td class="tg-0lax">3</td>
            <td class="tg-0lax">Shooting</td>
            <td class="tg-lqy6">70%</td>
            <td class="tg-lqy6">55%</td>
            <td class="tg-lqy6">90%</td>
            <td class="tg-lqy6">88%</td>
        </tr>
    </tbody>
</table>

Image of table pdf output

Issue Analytics

State:
Created 4 years ago
Comments:14

Top GitHub Comments

3reactions

anil826commented, May 6, 2020

Any support?

1reaction

albertomanzano11commented, May 25, 2022

@vstar001 I solved on my projects using this options:

<vue3-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="false"
        :preview-modal="false"
        filename="memoria-del-projecte.pdf"
        :pdf-quality="1"
        :manual-pagination="true"
        pdf-format="a4"
        pdf-orientation="portrait"
        pdf-content-width="800px"
        ref="html2Pdf"
        @beforeDownload="beforeDownload($event)"
      >

---

.set({
          ...options,
              margin: [0,15, 15, 15],
             filename: 'pdfFileName.pdf',
             image:        { type: 'jpeg', quality: 0.98 },
             html2canvas:  { scale: 1, letterRendering: true },
             jsPDF:        { unit: 'pt', format: 'letter', orientation: 'portrait' },
            pagebreak: { after: 'section', mode: ['avoid-all', 'css', 'legacy'] }
        })

I had a 60 pages PDF, so i divide my PDF into sections and break after each section.

<section class="pdf-item">
    <div class="myStyle keeptogether">
       ....your content
     </div>
</section>

<section class="pdf-item">
    <div class="myStyle keeptogether">
       ....your content
     </div>
</section>

The other problem i had was those super long text’s I used this class for those super text’s, in order to break if text was too long.

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

.myStyle {

// for me had to do some teeeks on wordbreaking
   overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: keep-all;
    word-break: keep-all;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
     }