CSS 分页符不起作用

Question

我在 div 上使用 "page-break-after" 属性。

CSS class -

div.breakhere {
    page-break-after: always;
    margin: 0! important;
    width: 100%;
}
.fancyTable {
    height: 100px;
    float: left;
}

而页面中的 div 是

 <div id="summary" width="100%">
        <table class="fancyTable" width="50%" ></table>
        <table class="fancyTable" width="50%"></table>
    </div>
    <div class="breakhere"> </div>

----

除以下情况外，它工作正常。

当 "The div with id 'summary'" 恰好在 "The div with breakhere class" 之前到达页面末尾时。 div 的一部分和下一页打印的表格。下一页不会被 breakhere class 打断。请检查以下屏幕。

我究竟做错了什么？提前致谢。

Answer 1

我解决了问题。

问题出在 fancyTable 中剩余的浮点数 class -- .花式表{ 高度：100px；向左飘浮; }

我只是嵌套表格而不是将它们的宽度设置为 50%。喜欢 -

<div id="summary" width="100%">
    <table>
        <tr>
            <td><table id="table1" class="fancyTable" width="50%" ></table></td>
            <td><table id="table1" class="fancyTable" width="50%" ></table></td>
        </tr>
    </table>
</div>

CSS 分页符不起作用

CSS page-break not working

html

css

pdf

webpage

page-break

----