css打印中的分页符

Question

我试图在打印CSS中的表之后添加一个分页，这就是我的代码，使用这段代码，我总是得到一个页面

<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;
       }
      }
  }
}

Answer 1

您只需使用break-after: always;属性

​

 @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>

​

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