Repeat HTML Tables Header and Footer in PDF

HiQPdf Client for .NET Core

The converter will automatically repeat the thead of a HTML table on each PDF page where the table is laid out when the thead style contains display: table-header-group. The converter will automatically repeat the tfoot of a HTML table on each PDF page where the table is laid out when the tfoot style contains display: table-footer-group. Below there is as simple example of a HTML table having a header and a footer which will be repeated on each PDF page.

HTML Document with THEAD and TFOOT to Repeat

Copy

<html>
<head>
    <title>Auto Repeat Thead</title>
</head>
<body style="margin: 0px">
    <table style="width: 750px;">
        <!-- table header to be repeated on each PDF page -->
        <thead align="left" style="display: table-header-group">
            <tr>
                <th>
                    <table style="width: 100%; border-bottom: 1px solid Black">
                        <tr>
                            <td style="width: 50px; vertical-align: middle">
                                <img style="width: 50px; border: 0px" alt="HiQPdf Logo Image" src="Images/HiQPdfLogo.jpg" />
                            </td>
                            <td style="vertical-align: middle; font-family: Times New Roman; font-size: 20px;
                                color: Navy">
                                Quickly Create High Quality PDFs
                            </td>
                        </tr>
                    </table>
                </th>
            </tr>
        </thead>
        <!-- table footer to be repeated on each PDF page -->
        <tfoot align="left" style="display: table-footer-group">
            <tr>
                <td>
                    <table style="width: 100%; border-top: 1px solid Black">
                        <tr>
                            <td style="vertical-align: middle; font-family: Times New Roman; font-size: 20px;
                                color: Green">
                                Table Footer to Repeat on Each PDF Page
                            </td>
                            <td style="width: 50px; vertical-align: middle">
                                <img style="width: 50px; border: 0px" alt="HiQPdf Logo Image" src="Images/HiQPdfLogo.jpg" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tfoot>
        <!-- table body -->
        <tbody>
            <tr>
                <td style="font-family: Times New Roman; font-size: 18px">
                    Row 1 of a HTML table with a header to be automatically repeated on all the PDF
                    pages
                </td>
            </tr>
            <tr>
                <td style="font-family: Times New Roman; font-size: 18px">
                    Row 2 of a HTML table with a header to be automatically repeated on all the PDF
                    pages
                </td>
            </tr>
            <tr>
                <td style="font-family: Times New Roman; font-size: 18px">
                    Row 3 of a HTML table with a header to be automatically repeated on all the PDF
                    pages
                </td>
            </tr>
            <!-- ..........-->
            <tr>
                <td style="font-family: Times New Roman; font-size: 18px">
                    Row 398 of a HTML table with a header to be automatically repeated on all the PDF
                    pages
                </td>
            </tr>
            <tr>
                <td style="font-family: Times New Roman; font-size: 18px">
                    Row 399 of a HTML table with a header to be automatically repeated on all the PDF
                    pages
                </td>
            </tr>
            <tr>
                <td style="font-family: Times New Roman; font-size: 18px">
                    Row 400 of a HTML table with a header to be automatically repeated on all the PDF
                    pages
                </td>
            </tr> 
        </tbody>
    </table>
</body>
</html>

Auto Repeat Thead Demo

In this demo you learn how to automatically repeat the thead content of a HTML table on each PDF page where the table is laid out. When the 'display: table-header-group' is present in the HTML table thead tag style the thead content will be automatically repeated on all the PDF pages. This happens by default and cannot be disabled.

Demo Source Code

Copy

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;

using HiQPdfClient;

namespace HiQPdf_Demo.Controllers
{
    public class AutoRepeatHtmlHeaderAndFooterController : Controller
    {
        // GET: AutoRepeatHtmlHeaderAndFooter
        public ActionResult Index()
        {
            SetCrtPageUri();

            return View();
        }

        [HttpPost]
        public ActionResult ConvertToPdf(IFormCollection collection)
        {
            string serverIP = collection["textBoxServerIP"];
            uint serverPort = uint.Parse(collection["textBoxServerPort"]);
            string serverPassword = collection["textBoxServerPassword"];

            // create the HTML to PDF converter
            HtmlToPdf htmlToPdfConverter = new HtmlToPdf(serverIP, serverPort);

            // use server password if necessary
            if (serverPassword.Length > 0)
                htmlToPdfConverter.ServerPassword = serverPassword;

            // set a demo serial number
            htmlToPdfConverter.SerialNumber = "YCgJMTAE-BiwJAhIB-EhlWTlBA-UEBRQFBA-U1FOUVJO-WVlZWQ==";

            // set browser width
            htmlToPdfConverter.BrowserWidth = int.Parse(collection["textBoxBrowserWidth"]);

            // convert HTML to PDF
            byte[] pdfBuffer = htmlToPdfConverter.ConvertHtmlToMemory(collection["textBoxHtmlCode"], collection["textBoxBaseUrl"]);

            FileResult fileResult = new FileContentResult(pdfBuffer, "application/pdf");
            fileResult.FileDownloadName = "AuoRepeatThead.pdf";

            return fileResult;
        }

        private void SetCrtPageUri()
        {
            HttpRequest httpRequest = this.ControllerContext.HttpContext.Request;
            UriBuilder uriBuilder = new UriBuilder();
            uriBuilder.Scheme = httpRequest.Scheme;
            uriBuilder.Host = httpRequest.Host.Host;
            if (httpRequest.Host.Port != null)
                uriBuilder.Port = (int)httpRequest.Host.Port;
            uriBuilder.Path = httpRequest.PathBase.ToString() + httpRequest.Path.ToString();
            uriBuilder.Query = httpRequest.QueryString.ToString();

            ViewData["CrtPageUri"] = uriBuilder.Uri.AbsoluteUri;
        }
    }
}

Other Resources

Convert URLs and HTML Code to PDF

Convert Many HTML Pages into a Single PDF

Get HTML Elements Position and Bounds in PDF

Set Conversion Triggering Mode

Create Outlines, Links and Table of Contents in PDF

Control Page Breaks in PDF with CSS Attributes