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 doesn't work in 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;
    }