CSS page-break-tefter:始终无法在表上工作

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以打破页面，但不会起作用，因为"此属性适用于生成框的块元素。它不会适用于不会生成不会生成一个的空的盒子。"Mozilla参考。

我在这里看到了两个可能的解决方案：

1）在父级上添加CSS Page-Break-terfer属性：

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

并完全删除这些元素，并完全='page_break'完全：

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

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

2）插入和NBP;内部的DIV内部（不建议使用）