Hi All,
I am trying to display the table header on repeat when there is page break inside a table when using the plugin html to pdf. I have tried most of the options, has someone faced trouble with this or implemented the same?
Attaching the html code
<html> <head> <style> body{ font-size:14px; } img { max-width: 100% !important; max-height: 100% !important; } thead { display: table-header-group } tfoot { display: table-row-group } tr { page-break-inside: avoid } </style> </head> <body> <div style = "width: 100%; height: 80%; "> <img style = "max-width: 100% !important; max-height: 100% !important;" appianDocId="136977" /> </div><div style = "width: 100%; height: 80%; "> <img style = "max-width: 100% !important; max-height: 100% !important;" appianDocId="136977" /> </div> <table style="width:100%; border: 1px solid black;border-collapse:collapse; sd:repeatheader;"> <thead> <tr style= "border: 1px solid black; page-break-inside: avoid; "> <th style = "border: 1px solid black;padding:5px">One</th> <th style = "border: 1px solid black;padding:5px">One</th> </tr> </thead> <tbody> <tr style= "border: 1px solid black;"> <td style = "border: 1px solid black;padding:5px; page-break-inside: avoid;">Row 1 Column 1</td> <td style = "border: 1px solid black;padding:5px">Row 1 Column 2</td> </tr> <tr style= "border: 1px solid black;"> <td style = "border: 1px solid black;padding:5px">Row 2 Column 1</td> <td style = "border: 1px solid black;padding:5px">Row 2 Column 2</td> </tr> <tr style= "border: 1px solid black;"> <td style = "border: 1px solid black;padding:5px">Row 3 Column 1</td> <td style = "border: 1px solid black;padding:5px">Row 3 Column 2</td> </tr> <tr style= "border: 1px solid black;"> <td style = "border: 1px solid black;padding:5px">Row 4 Column 1</td> <td style = "border: 1px solid black;padding:5px">Row 4 Column 2</td> </tr> <tr style= "border: 1px solid black;"> <td style = "border: 1px solid black;padding:5px">Row 5 Column 1</td> <td style = "border: 1px solid black;padding:5px">Row 5 Column 2</td> </tr></tbody> </table> </body> </html>
The generated pdf is as follows:
Discussion posts and replies are publicly visible
Hi Siddhaarth ,
Firstly, I have reviewed your code and noticed that there is an extra <div> tag at the image tag. If you didn't add this tag intentionally, try removing it, as it is causing extra space above the image. Additionally, try setting padding: 0 for both the img and body tags. I ran the code and identified these issues.
And To handle this issue, I think we should first set the page breakers and implement the <thead> and <tbody> accordingly. Alternatively, we could create a table by manually duplicating the headers after a specific number of rows. I’m not sure if this would be the best practice, but we could manage it using repeated <thead> and specific <tbodyy>like this.
Hi Gayatri,
Thanks for your input. Including the logic to consider the page break to the table helped to achieve the fix needed. I wanted to repeat the table header automatically on each page break, so manual breaking would be difficult.