Menu
According to W3.org, the style page-break-after applies to block level elements (http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)
<tr> is a block level element (according to this: http://www.htmlhelp.com/reference/html40/block.html, it is)
I'm doing this, but the page break is not creating an actual page break when printing:
<table>
<tr><td>blah</td></tr>
<tr><td>blah</td></tr>
<tr style="page-break-after: always"><td>blah</td></tr>
<tr><td>blah</td></tr>
</table>
Am I doing this the correct way?
If <tr> wasn't a block level element: how am I suppose to achieve this page break?
Note: the before code is just an example, but what I'm trying to do is to put a page-break every 5 rows of the table, so if you know any tips for that case, will be appreciated
209
Make sure all parent elements are display: block . Also consider overriding table , tr , td 's display styles with CSS grid for the print layout if you keep having issues with the table.
What are Page Breaks? Insert a page break when you want to move to the beginning of the next page in your document. Many users, unaware of the page break feature, will simply mash the Enter key when they want to start a new page. That works too – until you want to edit your document later.
Page breaks are avoided before the element. Page breaks are forced before the element resulting in the browser formatting the next page as a left page. Page breaks are forced before the element resulting in the browser formatting the next page as a right page.
Inside <head>, set this style in your CSS stylesheet
<head>
<style>
@media print {
tr.page-break { display: block; page-break-before: always; }
}
</style>
</head>
That way, it will produce a page break during printing right before this table row.
<tr class="page-break">
</tr>
The site you referenced states that <tr> "may also be considered a block-level element since it may contain block-level elements." Neither the W3.org or Mozilla docs state that <tr> is a block-level element.
Some Possible Solutions
Based on the wording and your example, I would ensure that the cell contains a true block-level element. Here are two examples using <h1> and <p> which are block-level text elements.
<tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>
Others have reported similar problems and one of the solutions might work for you.
As mentioned by My Lister, you could attempt to catch the printing action or generate a print version of the page that would separate the table out so you can obtain the desired page break after every five rows.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
