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

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:

  1. 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>
  1. 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
    }
  ]
}
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.