How to add tables auto printed into multiple pages in output PDF

You can set CSS styles that will tell html to pdf engine to auto-break table if it requires more than one single page.

Solution:

Add the following styles for your table. It will tell HTML to PDF engine to span table rows into multiple pages automatically when needed:

<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>

Here is the sample HTML samples showing how to print table spanned over multiple pages:

Static HTML code sample:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table that will split into multiple pages with the same header and footer </title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>

    <table border="1" width="99%">
        <!-- table header - begin-->
        <thead>
            <tr>
                <th>header column 1</th>
                <th>header column 2</th>
                <th>header column 3</th>
            </tr>
        </thead>
        <!-- table header - end-->
        <!-- table footer - begin-->
        <tfoot>
            <tr>
                <td><i>footer - column 1</i></td>
                <td><i>footer - column 2</i></td>
                <td><i>footer - column 3</i></td>                                
            </tr>
        </tfoot>
        <!-- table footer - end-->
        <!-- table content - begin -->        
        <tbody>
            <!-- single row begin -->
            <tr>
                <td>row 1 - column 1</td>
                <td>row 1 - column 2</td>
                <td>row 1 - column 3</td>                                
            </tr>
            <!-- single row end -->


            <!-- insert more rows here. they will automaticall span over multiple pages -->


        </tbody>
        <!-- table content - end -->                
    </table>

</body>
</html>

Dynamic HTML template for PDF.co that will take input data with rows information inside items array (see below).

HTML template:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table that will split into multiple pages with the same header and footer </title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>

    <table border="1" width="99%">
        <!-- table header - begin-->
        <thead>
            <tr>
                <th>header name 1</th>
                <th>header description 2</th>
                <th>header price 3</th>
            </tr>
        </thead>
        <!-- table header - end-->
        <!-- table footer - begin-->
        <tfoot>
            <tr>
                <td><i>footer - column 1</i></td>
                <td><i>footer - column 2</i></td>
                <td><i>footer - column 3</i></td>                                
            </tr>
        </tfoot>
        <!-- table footer - end-->
        <!-- table content - begin -->        
        <tbody>

            {{#each items}}
                <tr>
                    <td class="text-left">{{name}}</td>
                    <td class="text-left">{{description}}</td>
                    <td class="text-right">$ {{price}}</td>
                </tr>
            {{/each}}

        </tbody>
        <!-- table content - end -->                
    </table>

</body>
</html>

Input data:

{
"items": [
    {
      "name": "T-800 Prototype Research",
      "description": "prototype research",
      "price": 1000.0
    },
    {
      "name": "T-800 Cloud Sync Setup",
      "description": "sync setup",
      "price": 300.0
    }
  ]
}