htmlcssdompdf
Dompdf: Force table row to split across 2 pages
I am using "dompdf/dompdf": "^0.8.3" for PDF print.
I have a simple table with rows tds with big text content... For ex:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thead>
<tr>
<th>PRODUCT</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-----
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
</td>
</tr>
<tr>
<td>2-----
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
</td>
</tr>
<tr>
<td>3-----
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
</td>
</tr>
<tr>
<td>4-----
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
</td>
</tr>
<tr>
<td>5-----
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
</td>
</tr>
</tbody>
</table>
</body>
</html>
When I print it using A4 size page, I would like to have a part of 4th row print in the first page in the available space and then continue to print the rest of the text in the next page. But it seems that all of the 4th row is moved to the second page. Is there any way to force this (using css or through a dompdf setting) as per my requirement?
I have tried the following css for the page breaks:
table {
page-break-inside: auto;
}
table tr {
page-break-inside: auto;
}
table tr td {
page-break-inside: auto;
}
But they never have helped me to split a row between 2 pages.
Thanks for your quick feedback..
Cheers!!
Solution
Dompdf (currently at 0.8.3 as of this post) does not support splitting table rows across pages. This is a long-standing issue with Dompdf (ref https://github.com/dompdf/dompdf/issues/98).
Your particular content, if it follows the sample you provided, does not really look to need a table structure since it only has one cell per row. You could fairly well replicate the structure using simple DIV elements.
Only gotcha is that table header. If the sample truly reflects your output you could use a page header instead.
Something along the lines of the following:
<!DOCTYPE html>
<html>
<head>
<style>
@page { margin-top: 50px; }
#header { position: fixed; top: -50px; left: 0px; right: 0px; padding: 10px; text-align: center; font-weight: bold; }
</style>
</head>
<body>
<div id="header">
PRODCUT
</div>
<div>
1-----
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
MCHBMES1 -- MCHBMES1 -- MCHBMES1 -- MCHBMES1 --
</div>
</body>
</html>
- jekyll yaml front-matter is turned into <hr> tag by markdown
- How do I create a transition between 2 different font awesome icons?
- How to load up CSS files using Javascript?
- column-count causes errors with printing tables
- adding a border to a transparent div with clip path
- How to detect the dragleave event in Firefox when dragging outside the window
- adding email subject to mailto tag using Guidewire's gui framework
- FreeMarker/NetSuite PDF Template - Double sorting by date, with possible empty values
- How to create a custom element without attachShadow?
- What am I doing wrong with these PHP session variables?
- How can I change the color of a progress bar value in HTML?
- How do I remove 1-pixel edge on right side of my page?
- Add additional field issue
- XPath for colspan attribute values as browser understands them?
- How do I remove a file from the FileList
- CSS Grid matching heights
- A smarter way to "offset" an element from its container (with background)?
- Find first scrollable parent
- Show seconds on input type=date-local in Chrome
- Problem with selecting a specific web element with Playwright in Python
- How to open select file dialog via js?
- Make "scrollLeft" / "scrollTop" changes not trigger scroll event listener
- JAVA email tracking pixel keep track of reading time
- Active Navigation Bar with PHP?
- Don't hide dropdown list when clicked inside it
- XPath select descendent of parents sibling
- Scrolling in sticky-top navbar Bootstrap 4
- How to use triple quotation marks for inline JS in HTML
- jQuery UI 1.10: dialog and zIndex option
- How to rotate text on table with two rowspan using bootstrap