Reputation: 25

Cannot get page breaks to work using css and prince

I cannot get page breaks into my pdf using css and prince. The second table touches the first one. What am I doing wrong? I think I may have misunderstood how to use instructions for print in css, from my perspective it looks like I'm doing exactly what the user guide is telling me (link)

My code is as follows:

@page { size: 210mm  297mm;   
}

chapter {page-break-before: always;} 

table.page{
  width:14cm;
  font-family:"Times New Roman";
  font-size: 12pt;
  border: 1px solid black;
  text-align:justify;
  padding:0;
  margin:0;
}

td.number{
  width:1.8cm;
  font-family:"Times New Roman" ;
  font-size: 12pt;
  text-align:justify;
  padding:0;
  margin:0;
}

td.content{
  width:12cm;
  font-family:"Times New Roman";
  font-size: 12pt;
  text-align:justify;
  padding:0;
  margin:0;
}

<body>
    <chapter>
        <table class="page">
            <tr>
                <td colspan="2">
                     <h1>Title </h1>

                </td>
            </tr>
            <tr>
                <td class="number">
                    <div>1</div>
                </td>
                <td class="content">
                    <div>this is some text</div>
                </td>
            </tr>
        </table>
    </chapter>
    <chapter>
        <table class="page">
            <tr>
                <td colspan="2">
                     <h1>Title 2</h1>

                </td>
            </tr>
            <tr>
                <td class="number">
                    <div>2</div>
                </td>
                <td class="content">
                    <div>this is some more text</div>
                </td>
            </tr>
        </table>
    </chapter>
</body>

Upvotes: 1

Answers (2)

Serge Stroobandt

Reputation: 31498

Applies to block elements only

Applies to: block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.

It won't apply on an empty <div> that won't generate a box.

Note: this property is in progress of being replaced by the more generic break-before. This new property also handles column and region breaks and is syntactically compatible with page-break-before.

Before using page-break-before, check if you can use break-before instead. In the future page-break-before will be a mere alias for some values of it.

Source

Solution

One can get around this limitation, simply by converting the inline element into a block element (assuming you can afford to do so).

.pagebreak {
    display: block;
    page-break-before: always;
}

Upvotes: 0

MMill