Welcome Guest Search | Active Topics | Sign In | Register

HTML to PDF page breaks with table headers not rendering correctly Options
OJB1
Posted: Thursday, October 6, 2022 3:39:36 PM
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");
eo_support
Posted: Thursday, October 6, 2022 9:27:03 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,103
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#manual

Please feel free to let us know if you have any more questions.

Thanks!
OJB1
Posted: Friday, October 7, 2022 9:34:39 AM
Rank: Newbie
Groups: Member

Joined: 10/6/2022
Posts: 9
Brilliant many thanks
eo_support
Posted: Friday, October 7, 2022 9:40:51 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,103
You are very welcome. Please feel free to let us know if there is anything else.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.