'page break in css print

I'm trying to add a page break after tables in print CSS, this is what my code looks like, with this code, I'm always getting one page

<div class="container">
    <table></table>
    <div class="page-break">
    <table></table>
    <div class="page-break"></div>
    <table></table>
</div>

.container {
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

table {
   height: 100vh;
}

@media print {
  body * { 
     visibility: hidden;
     .container{
       height: auto;
       overflow: visible;
       & *{
           visibility: visible;
       }
      }
  }
}
htmlcssprinting


Solution 1:[1]

you just have to use break-after: always; property

 @media print {
  .page-break {
    break-after: always;
    /* for firefox */
    page-break-after: always;
    /* for webkit */
    -webkit-column-break-after: always;
  }
}
<div class="container">
    <table><td>1</td></table>
    <div class="page-break">
    <table><td>1</td></table>
    <div class="page-break"></div>
    <table><td>1</td></table>
</div>

reference https://developer.mozilla.org/fr/docs/Web/CSS/break-after

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeremy-denis

Related Questions