html - page-break-inside 导致 chrome 中出现未知空格

Question

我正在使用 page-break-inside : avoid ; 一些 java 脚本来防止表格超过两页，它工作正常，但它在表格之间添加了随机间距。有没有办法防止这种情况发生？

我只在chrome中遇到这个问题，有人知道我怎样才能摆脱这些空间吗？

table {

    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    page-break-inside : avoid ;
    position:relative;
    }

Answer 1

一般而言，似乎有各种可能的原因page-break-inside在 Google Chrome 或 Webkit 浏览器中会出现异常：

• page-break-inside 在 Chrome 中不起作用？
• https://bugs.webkit.org/show_bug.cgi?id=5097

最简单的解决方案是将其添加page-break-inside: avoid;到周围的div元素中。

HTML：

<div class="no-page-break">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</div>

CSS：

.no-page-break {
    page-break-inside: avoid;
    }