Rank: Newbie Groups: Member
Joined: 10/6/2022 Posts: 9
|
Hello,
I'm using one of your basic C# code samples whilst I test the output of a basic table.
The table header is shown correctly on each page using <thead>, however the page break doesnt cleanly split the table in between an actual table row, it splits is half way down a row so I get some rendering of the row across two pages. Is this expected or can we some achieve a cleaner break?
On page 1 I see the side borders of the row that has been split by te page break, then on the second page, the remaining part of the row rendered looks scrunched becuase some of the row height was shown on previous page.
My code sample is shown below:
<!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } h2 { color: maroon; margin-left: 40px; } </style> </head> <body> <div class='container-fluid text-center p-0 m-0'> <h2>HTML Table</h2> <table> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </tbody> </table> </div> </body> </html>";
EO.Pdf.HtmlToPdf.Options.PageSize = EO.Pdf.PdfPageSizes.A4; //Using A4 in landscape, note that the width/height values are swapped EO.Pdf.HtmlToPdf.Options.PageSize = new SizeF(EO.Pdf.PdfPageSizes.A4.Height, EO.Pdf.PdfPageSizes.A4.Width); var testFile = EO.Pdf.HtmlToPdf.ConvertHtml(html, "TestReport.pdf");
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,217
|
Hi, By default the converter only tries to keep text line together (so that a single line of text doesn't get split from the middle). If you want to keep table row together, you can add the following CSS style in your page:
Code: CSS
tr
{
page-break-inside: avoid;
}
You can find more details here: https://www.essentialobjects.com/doc/pdf/htmltopdf/paging.html#manualPlease feel free to let us know if you have any more questions. Thanks!
|
Rank: Newbie Groups: Member
Joined: 10/6/2022 Posts: 9
|
Brilliant many thanks
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,217
|
You are very welcome. Please feel free to let us know if there is anything else.
|