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 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;
    }