EVO HTML to PDF Converter automatically repeats the thead and tfoot of a HTML table in all the PDF pages where the table is rendered. This is the default behavior of the converter. You can disable this behavior from API setting the PdfDocumentOptionsTableHeaderRepeatEnabled and PdfDocumentOptionsTableFooterRepeatEnabled properties to false, or you can disable it from HTML adding style="display: table-row-group" to thead and tfoot tags. An object of PdfDocumentOptions type is exposed by the HtmlToPdfConverterPdfDocumentOptions property
Code Sample - Repeat HTML Table Header and Footer in PDF Pages
C#
protected void convertToPdf() { // Get the server IP and port String serverIP = textBoxServerIP.Text; uint serverPort = uint.Parse(textBoxServerPort.Text); // Create a HTML to PDF converter object HtmlToPdfConverter htmlToPdfConverter = null; if (radioButtonUseTcpService.Checked) htmlToPdfConverter = new HtmlToPdfConverter(serverIP, serverPort); else htmlToPdfConverter = new HtmlToPdfConverter(true, textBoxWebServiceUrl.Text); // Set optional service password if (textBoxServicePassword.Text.Length > 0) htmlToPdfConverter.ServicePassword = textBoxServicePassword.Text; // Set license key received after purchase to use the converter in licensed mode // Leave it not set to use the converter in demo mode htmlToPdfConverter.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c="; // Set an adddional delay in seconds to wait for JavaScript or AJAX calls after page load completed // Set this property to 0 if you don't need to wait for such asynchcronous operations to finish htmlToPdfConverter.ConversionDelay = 2; // Set if the HTML tables headers are repeated in PDF // You can also disable the header repeating if you add style="display: table-row-group" to thead tag in HTML htmlToPdfConverter.PdfDocumentOptions.TableHeaderRepeatEnabled = repeatHtmlTableHeaderCheckBox.Checked; // Set if the HTML tables footers are repeated in PDF // You can also disable the footer repeating if you add style="display: table-row-group" to tfoot tag in HTML htmlToPdfConverter.PdfDocumentOptions.TableFooterRepeatEnabled = repeatHtmlTableFooterCheckBox.Checked; byte[] outPdfBuffer = null; if (convertHtmlRadioButton.Checked) { string htmlWithForm = htmlStringTextBox.Text; string baseUrl = baseUrlTextBox.Text; // Convert a HTML string with repetead header and footer to a PDF document in a memory buffer outPdfBuffer = htmlToPdfConverter.ConvertHtml(htmlWithForm, baseUrl); } else { string url = urlTextBox.Text; // Convert the HTML page with repetead header and footer to a PDF document in a memory buffer outPdfBuffer = htmlToPdfConverter.ConvertUrl(url); } }
HTML Table with THEAD and TFOOT
XML
<!DOCTYPE html> <html> <head> <title>Repeat HTML Table Header and Footer in PDF Pages</title> </head> <body style="margin: 0px; font-family: 'Times New Roman'; font-size: 14px"> <table style="width: 1024px; font-family: 'Times New Roman'; font-size: 16px"> <!-- The automaticaly repeated table header --> <!-- To disable the repeating of the header add style="display: table-row-group" to thead --> <thead> <tr> <td colspan="2"> <table style="border-bottom: 1px solid gray; width: 100%;"> <tr> <td style="width: 200px"> <img alt="Logo Image" style="float: left; width: 200px" src="img/logo.jpg" /> </td> <td style="text-align: right; font-size: 22px; font-weight: bold; color: navy">Repeated Table Header </td> </tr> </table> </td> </tr> </thead> <tr> <td style="background-color: silver; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">1</td> <td style="background-color: whitesmoke; font-weight: normal; font-style: normal; padding: 30px 10px 30px 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </td> </tr> <tr> <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">2</td> <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </td> </tr> <tr> <td style="background-color: gainsboro; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">3</td> <td style="font-weight: normal; font-style: italic; background-color: azure; padding: 30px 10px 30px 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </td> </tr> <tr> <td style="background-color: whitesmoke; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">4</td> <td style="font-weight: bold; font-style: italic; background-color: beige; padding: 30px 10px 30px 10px">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima . Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </td> </tr> <tr> <td style="background-color: silver; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">5</td> <td style="background-color: whitesmoke; font-weight: normal; font-style: normal; padding: 30px 10px 30px 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </td> </tr> <tr> <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">46</td> <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </td> </tr> <tr> <td style="background-color: gainsboro; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">47</td> <td style="font-weight: normal; font-style: italic; background-color: azure; padding: 30px 10px 30px 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </td> </tr> <tr> <td style="background-color: whitesmoke; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">48</td> <td style="font-weight: bold; font-style: italic; background-color: beige; padding: 30px 10px 30px 10px">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima . Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </td> </tr> <tr> <td style="background-color: silver; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">49</td> <td style="background-color: whitesmoke; font-weight: normal; font-style: normal; padding: 30px 10px 30px 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </td> </tr> <tr> <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">50</td> <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </td> </tr> <!-- The automaticaly repeated table footer --> <!-- To disable the repeating of the footer add style="display: table-row-group" to tfoot --> <tfoot> <tr> <td colspan="2"> <table style="border-top: 1px solid gray; width: 100%;"> <tr> <td style="font-size: 22px; font-weight: bold; color: green">Repeated Table Footer </td> <td style="width: 200px"> <img alt="Logo Image" style="float: right; width: 200px" src="img/logo.jpg" /> </td> </tr> </table> </td> </tr> </tfoot> </table> </body> </html>