Search code examples
htmlpage-break

Html page break table with border (print)

I need need to use page break inside table rows. But the problem is when i use page break after row(tr), that row(tr) is drawing till end of page when printing. Any ideas to fix this problem.

source:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
    <table border="1" >
       <thead>
         <tr><th>heading</th><th>heading 2</th></tr>
       </thead>
       <tfoot>
           <tr><td>footer 1</td><td>footer 2</td></tr>
       </tfoot>
       <tr>
           <td>x</td> <td>x1</td>
       </tr>
       <tr>
           <td>x</td> <td>x2</td>
       </tr>
       <tr>
          <td></td> <td>
          <div style="page-break-after: always;"></div>
          </td>
       </tr>
       <tr>
          <td>x</td> <td>x3</td>
       </tr>
    </tbody>
    </table>
</body>
</html>

screen shot: first page, first page second page, second page

Solution

  • the reason is <div style="page-break-after: always;"></div>

    always - Always insert a page break after the element

    For instance, with avoid value the issue is not observed on the print page.

    CSS page-break-after Property