HiQPdf Documentation

Repeat HTML Tables Header and Footer in PDF

Quickly Create High Quality PDFs

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

<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

C#
private void buttonCreatePdf_Click(object sender, EventArgs e)
{
    // create the HTML to PDF converter
    HtmlToPdf htmlToPdfConverter = new HtmlToPdf();

    // set browser width
    htmlToPdfConverter.BrowserWidth = int.Parse(textBoxBrowserWidth.Text);

    Cursor = Cursors.WaitCursor;

    string pdfFile = Application.StartupPath + @"\DemoOutput\AuoRepeatThead.pdf";
    try
    {
        htmlToPdfConverter.ConvertHtmlToFile(textBoxHtmlCode.Text, textBoxBaseUrl.Text, pdfFile);
    }
    catch (Exception ex)
    {
        MessageBox.Show(String.Format("Conversion failed. {0}", ex.Message));
        return;
    }
    finally
    {
        Cursor = Cursors.Arrow;
    }

    // open the PDF document
    try
    {
        System.Diagnostics.Process.Start(pdfFile);
    }
    catch (Exception ex)
    {
        MessageBox.Show(String.Format("Conversion succeeded but cannot open '{0}'. {1}", pdfFile, ex.Message));
    }
}
See Also

Other Resources