user2031297
user2031297

Reputation: 171

css page-break-after:always is not working on table

Below is part of my html where I put the page-break-after:always but when creating a pdf file, the page break does not work.

CSS

@media print {
.encounter_form { position:relative; z-index: 0; left:0px; top:opx; }
}

div#page_break{ page-break-after:always;}

HTML

<div class='text encounter' style='margin:0px 0 0 0; padding:0px 0 0 0; border-style:dotted; border-color:white;'>
  <h1>THIS IS A HEADER</h1> 
  <table>
    <tr><td>
      <span>  </span><span class=text><br>
      <span> </span><span class=text><br>
    </td></tr>
  </table>

<DIV id='page_break' style='page-break-after:always;'></DIV>
</div>

<div class='text encounter_form' style='margin:0px 0 0 0; padding:0px 0 0 0;  border-style:dotted; border-color:white;'>
  <h1>Work Status Report</h1> 
    <br>
    <div style='margin:5px 0 0 0; padding: 0px 0 0 0; border thin black solid;'>

    <table cellpadding='2' cellspacing='0'>
      <tr><td>blabla</td></tr>
      <tr><td>blabla</td></tr>
      <tr><td>blabla</td></tr>
      <tr><td>blabla</td></tr>
    </table>
  <DIV id='page_break' style='page-break-after:always;'></DIV>
  </div>

Upvotes: 2

Views: 775

Answers (1)

Keammoort
Keammoort

Reputation: 3075

I realise that this question is old, but maybe it'll help someone anyways...

I've noticed that the author inserted empty div to break the page, but won't work because "This properties applies to block elements that generate a box. It won't apply on an empty that won't generate a box." Mozilla reference.

I see two possible solutions here:

1) add CSS page-break-after property on parent div:

.encounter, .encounter_form {
    page-break-after: always;
}

and remove those elements with id='page_break' completely:

<DIV id='page_break' style='page-break-after:always;'></DIV>

By the way ids should be unique, but here there are two elements with the same id.

2) insert &nbps; inside empty div (not recommended)

Upvotes: 1

Related Questions