page-break-inside causes unknown spaces in chrome

Question

I'm using page-break-inside : avoid ; and some java script to prevent tables from breaking over two pages, it's working correctly but it's adding random spacing between tables. Is there anyway to prevent this from happening?

I'm only having this issue in chrome, anyone know how I can get rid of these spaces?

table {

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

Answer 1

There seem to be various possible reasons page-break-inside would work oddly in Google Chrome or Webkit browsers in general:

• page-break-inside doesn't work in Chrome?
• https://bugs.webkit.org/show_bug.cgi?id=5097

The easiest solution would be to add the page-break-inside: avoid; to a surrounding div element instead.

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