Page break directly after table header

[uncaught]

The thead is rendered as last line of the page, while the next page starts with the first row without a thead:

To my understanding the thead should be rendered on the next page when no row fits anymore.

(Or in this example even the grey box should wrap to the next page because it has a page-break-after: avoid;, but that's not the cause of the thead misplacement.)

php

$dompdf = new Dompdf();
$dompdf->loadHtml($html, 'UTF-8');
$dompdf->setPaper('A4', 'landscape');
$dompdf->render();
$dompdf->stream("test.pdf", ['Attachment' => false]);

html

<style>
  .workPackage {
    background-color: #DFDFDF;
    border-left-color: #FA7800;
    border-left-width: 4px;
    border-left-style: solid;
    margin-top: 20px;
    margin-bottom: 10px;
    page-break-after: avoid;
  }

  .workPackageLocation {
    padding: 8px;
  }

  .workPackageDetails {
    font-size: 13px;
    color: #616161;
    padding: 5px;
    text-align: right;
  }

  .workPackageName {
    font-weight: bold;
  }

  .recordsTable {
    font-size: 14px;
  }

  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  .workPackage th,
  .workPackage td {
    vertical-align: middle;
  }

  .recordsTable th,
  .recordsTable td {
    padding: 2px 6px 2px 2px;
    vertical-align: top;
  }

  .recordsTable .date {
    text-align: left;
    width: 8%;
  }

  .recordsTable .timeFromTo {
    text-align: left;
    width: 9%;
  }

  .recordsTable .timeInHours {
    text-align: right;
    width: 6%;
  }

  .recordsTable .userName {
    text-align: left;
    width: 15%;
  }

  .recordsTable .description {
    text-align: left;
  }

  .evenRow {
    background-color: #DFDFDF;
  }
</style>

<table>
  <tbody>
  <tr>
    <td>Customer:</td>
    <td>QA - E2E - Kunde A</td>

    <td>Customer-NO:</td>
    <td>z2289285 ade5t63</td>
  </tr>
  <tr>
    <td>Proje:</td>
    <td>E2E-Tests</td>

  </tr>
  </tbody>
</table>

<div class="workPackage">
  <table>
    <tbody>
    <tr>
      <td>
        <div class="workPackageLocation">
          <div class="workPackageName">Lorem ipsum dolor sit amet</div>
          <div class="workPackageGroup">Lorem ipsum dolor sit amet</div>
        </div>
      </td>
      <td>
        <div class="workPackageDetails">
          <div>PID:
            213S
          </div>
          <div>Offer number:
            xasdf asdfowet3633
          </div>
          <div>Type:
            Lorem
          </div>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<table class="recordsTable">
  <thead>
  <tr>
    <th class="date">Date</th>
    <th class="timeFromTo">From/to</th>
    <th class="timeInHours">Time (h)</th>
    <th class="userName">Employee</th>
    <th class="description">Description of Activity</th>
  </tr>
  </thead>
  <tbody>
  <tr class="">
    <td class="date">08.08.2021</td>
    <td class="timeFromTo">10:45 - 11:15</td>
    <td class="timeInHours">0,50</td>
    <td class="userName">QA Automated</td>
    <td class="description"></td>
  </tr>
  <tr class="evenRow">
    <td class="date">09.08.2021</td>
    <td class="timeFromTo">12:15 - 13:15</td>
    <td class="timeInHours">1,00</td>
    <td class="userName">QA Automated</td>
    <td class="description"></td>
  </tr>
  <tr class="">
    <td class="date">09.08.2021</td>
    <td class="timeFromTo">13:00 - 14:15</td>
    <td class="timeInHours">1,25</td>
    <td class="userName">QA Automated</td>
    <td class="description"></td>
  </tr>
  <tr class="evenRow">
    <td class="date">09.08.2021</td>
    <td class="timeFromTo">14:00 - 15:00</td>
    <td class="timeInHours">1,00</td>
    <td class="userName">QA Automated</td>
    <td class="description"></td>
  </tr>
  <tr class="">
    <td class="date">09.08.2021</td>
    <td class="timeFromTo">14:45 - 16:30</td>
    <td class="timeInHours">1,75</td>
    <td class="userName">QA Automated</td>
    <td class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
      sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
      sea takimata sanctus est Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna
      aliquyam erat,dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna
      aliquyam erat,dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna
      aliquyam erat,dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna aliquyam erat,magna
      aliquyam erat,dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodconsetetur sadipscing elitr, sed
      diam nonumy eirmodeirmodconsetetur sadipscing elitr, sed diam nonumy eirmodeirmodconsetetur sadipscing elitr, sed
      diam nonumy eirmod
    </td>
  </tr>
  </tbody>
</table>
<div class="workPackage">
  <table>
    <tbody>
    <tr>
      <td>
        <div class="workPackageLocation">
          <div class="workPackageName">Lorem ipsum dolor sit amet</div>
          <div class="workPackageGroup">Lorem ipsum dolor sit amet</div>
        </div>
      </td>
      <td>
        <div class="workPackageDetails">
          <div>PID:
            213V
          </div>
          <div>Type:
            Lorem
          </div>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<table class="recordsTable">
  <thead>
  <tr>
    <th class="date">Date</th>
    <th class="timeFromTo">From/to</th>
    <th class="timeInHours">Time (h)</th>
    <th class="userName">Employee</th>
    <th class="description">Description of Activity</th>
  </tr>
  </thead>
  <tbody>
  <tr class="">
    <td class="date">08.08.2021</td>
    <td class="timeFromTo">10:15 - 11:45</td>
    <td class="timeInHours">1,50</td>
    <td class="userName">Robot Test</td>
    <td class="description"></td>
  </tr>
  <tr class="evenRow">
    <td class="date">09.08.2021</td>
    <td class="timeFromTo">08:15 - 10:30</td>
    <td class="timeInHours">2,25</td>
    <td class="userName">Robot Test</td>
    <td class="description"></td>
  </tr>
  <tr class="">
    <td class="date">09.08.2021</td>
    <td class="timeFromTo">10:15 - 10:30</td>
    <td class="timeInHours">0,25</td>
    <td class="userName">QA Automated</td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>

[uncaught]

Is there a way to tell the engine to switch to a new page during the rendering?

I can detect whether there is too little space left for another of those gray blocks using the begin_frame event, but I can't seem to tell it to "break after this frame". Calling Canvas::new_page() inside begin_frame just inserts blank space, but keeps the offsets of all following frames the same, so the position doesn't get fixed.

My very bad current work around is to render the PDF multiple times in a while loop, until I have identified all the blocks that need to go on the next page.

[Mellthas]

The table header seems indeed to not be repeated if a page break happens right after it. It kinda makes sense with how things currently work.

#2512 adds support for page-break-before/-after on table rows, with that you can set page-break-after: avoid on the header row to prevent a break.

Manually forcing a page break before an element would involve the split method (see

dompdf/src/FrameDecorator/Page.php

Lines 532 to 537 in dd09636

	Helpers::dompdf_debug("page-break", "break allowed, splitting.");
	$iter->split(null, true);
	$this->_page_full = true;
	$this->_in_table = $in_table;
	$iter->_already_pushed = true;
	$frame->_already_pushed = true;

for how unforced page breaks are inserted generally), but I don't know if that really works within one of the callbacks.

[uncaught]

I would still see this as a bug because dompdf is managing where the table headers go. Whenever a table starts on a new page (even if that's the first row), the header should go there.

Thanks for your input on the splitting, but I couldn't find a way, yet. The Page::split is the only sensible public method in this context, but it's empty :D

Do you know a way to reflow the frames after a $frame->get_dompdf()->getCanvas()->new_page(); call?

It might be cool to have something like this build in: page-break-before: {if y-position is > 400 px}

[Mellthas]

The split method is inherited from AbstractFrameDecorator, so every frame has it. It is only empty for Page, because splitting bubbles up the tree, calling split on the parent frame each turn. But I am just giving pointers, I haven't tried altering breaks or reflow manually from one of the callbacks, so I can't tell how much you can achieve there.

[Mellthas]

For the break behavior, it might make sense to add page-break-after: avoid for the header row to the default style sheet, once #2512 gets in, e.g. (would need to be tweaked to be consistent with how repeating table headers are detected):

table > thead:first-of-type > tr:last-child {
     page-break-after: avoid;
}

I think this would be better than baking the break prevention into the code, as it would allow to easily overwrite the default behavior, if someone wanted to allow breaks there for some reason.

[uncaught]

Yes, that sounds great. Also page-break-inside: avoid; for thead should be the default, in case of multi-row headers.