dompdf / dompdf/dompdf

Page break directly after table header

Open
#2,518 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

tables
Dominant language
PHP
Stars
11.2k
Forks
1.8k
No merged PRs in 30d

Description

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

image

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>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied PHP reproduction using loadHtml(), setPaper('A4', 'landscape'), render(), and stream(), then inspect the generated PDF around the recordsTable examples. Done means a table header does not remain alone at the bottom of a page when its next row starts on the following page, with the provided reproduction behaving consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, php
Domain
backend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.