html - css 分页后 :always is not working on table

Question

下面是我的 html 的一部分，我在其中放置了 page-break-after:always 但是在创建 pdf 文件时，分页符不起作用。

CSS

@media print {
.encounter_form { position:relative; z-index: 0; left:0px; top:opx; }
}

div#page_break{ page-break-after:always;}

HTML

<div class='text encounter' style='margin:0px 0 0 0; padding:0px 0 0 0; border-style:dotted; border-color:white;'>
  <h1>THIS IS A HEADER</h1> 
  <table>
    <tr><td>
      <span>  </span><span class=text><br>
      <span> </span><span class=text><br>
    </td></tr>
  </table>

<DIV id='page_break' style='page-break-after:always;'></DIV>
</div>

<div class='text encounter_form' style='margin:0px 0 0 0; padding:0px 0 0 0;  border-style:dotted; border-color:white;'>
  <h1>Work Status Report</h1> 
    <br>
    <div style='margin:5px 0 0 0; padding: 0px 0 0 0; border thin black solid;'>

    <table cellpadding='2' cellspacing='0'>
      <tr><td>blabla</td></tr>
      <tr><td>blabla</td></tr>
      <tr><td>blabla</td></tr>
      <tr><td>blabla</td></tr>
    </table>
  <DIV id='page_break' style='page-break-after:always;'></DIV>
  </div>

Answer 1

我意识到这个问题很老了，但也许无论如何它都会对某人有所帮助......

我注意到作者插入了空的 div 来打断页面，但不会起作用，因为“此属性适用于生成框的 block 元素。它不适用于不会生成框的空元素盒子。” Mozilla reference .

我在这里看到两种可能的解决方案:

1) 在父 div 上添加 CSS page-break-after 属性:

.encounter, .encounter_form {
    page-break-after: always;
}

并完全删除那些 id='page_break' 的元素:

<DIV id='page_break' style='page-break-after:always;'></DIV>

顺便说一句，id 应该是唯一的，但是这里有两个具有相同 id 的元素。

2) 插入 &nbps;在空的 div 中(不推荐)