Row in the table exceeds page limit (print publication)

Question

Row in the table exceeds page limit (print publication)

When I print my table (ctrl+p), it does not break the way I want. The last row of the first page splits with part on the second page. Is there a solution for this issue? The rows can vary in content and size, and I have tried using properties like

page-break-before/after: auto. page-break-inside:avoid;

but to no avail. Any suggestions on how to break and move the table parts to the next page without splitting the last row for print media would be greatly appreciated.

table,th,td { border:1px solid black; border-collapse:collapse; } th,td { padding:5px; }

</style>
</head>
<body>
<table style="width:100%;">
<tr>
  <th><span>Firstname</span></th>
  <th><span>Lastname</span></th>      
  <th><span>Points</span></th>
</tr>
<tr>
  <td><span>Jill</span></td>
  <td><span>Smith</span></td>     
  <td><span>50</span></td>
</tr>
<tr>
  <td><span>Eve</span></td>
  <td><span>Jackson</span></td>       
  <td><span>94</span></td>
</tr>
<tr>
  <td><span>John</span></td>
  <td><span>Doe</span></td>       
  <td><span>80</span></td>
</tr>
   /* Numerous other <tr> elements here */
</table>

</body>
</html>

html css printing printing-web-page

Answer 1

Answer №1

To achieve the desired outcome of your table only breaking between rows and not within them, you can utilize a CSS rule in Firefox and Internet Explorer like so:

tr {page-break-inside: avoid;}

However, please note that this method may not be effective in other browsers such as Chrome.

Another approach is to prevent page breaks within the content of individual cells by enclosing them in a div with "page-break-inside: avoid;" applied. Keep in mind that if the height of the content varies within the row, parts of it may still end up on different pages.

If you are determined to address this issue and are open to using some JavaScript, I have shared a solution here that should provide the desired result.

Answer 2

To achieve the desired outcome of your table only breaking between rows and not within them, you can utilize a CSS rule in Firefox and Internet Explorer like so:

tr {page-break-inside: avoid;}

However, please note that this method may not be effective in other browsers such as Chrome.

Another approach is to prevent page breaks within the content of individual cells by enclosing them in a div with "page-break-inside: avoid;" applied. Keep in mind that if the height of the content varies within the row, parts of it may still end up on different pages.

If you are determined to address this issue and are open to using some JavaScript, I have shared a solution here that should provide the desired result.

Answer 3

Answer №2

If you want to create a page break that is hidden on the screen but will appear when you print, there are some rules you should be aware of. The CSS property page-break-before:always can only be used on block elements, not inline or table-row elements. This means you can't apply it directly to a row or cell, and adding an empty div with this style won't work either. You may need to wrap the content in a <div> or <p> tag to achieve the desired effect.

Similarly, page-break-after:always can be used at the end of a previous element to force a page break. However, this can be frustrating if you're trying to protect a specific grouping or row.

Some browsers might require you to set the table style to page-break-inside:auto, as tables often have a default style of page-break-before:avoid. Keep in mind that adding this style won't necessarily help, as the browser is already doing its best to avoid breaking up your table.

In Chrome particularly, failing to remove the default style can render other options useless. It's important to understand how these rules work to achieve the desired page breaks in your printed document.

Answer 4

If you want to create a page break that is hidden on the screen but will appear when you print, there are some rules you should be aware of. The CSS property page-break-before:always can only be used on block elements, not inline or table-row elements. This means you can't apply it directly to a row or cell, and adding an empty div with this style won't work either. You may need to wrap the content in a <div> or <p> tag to achieve the desired effect.

Similarly, page-break-after:always can be used at the end of a previous element to force a page break. However, this can be frustrating if you're trying to protect a specific grouping or row.

Some browsers might require you to set the table style to page-break-inside:auto, as tables often have a default style of page-break-before:avoid. Keep in mind that adding this style won't necessarily help, as the browser is already doing its best to avoid breaking up your table.

In Chrome particularly, failing to remove the default style can render other options useless. It's important to understand how these rules work to achieve the desired page breaks in your printed document.

Row in the table exceeds page limit (print publication)

Answer №1

Answer №2

Similar questions

Utilize JasperReports in conjunction with Spring MVC to effortlessly generate and print reports on the client side without the need

Adding a <span> element within an <h1> tag in WordPress

The flex reverse-column child's text selection occurred in the incorrect direction

Include the entire HTML script within a PHP file

Customize TYPO3 templates by modifying the div id structure

Float: right; is causing distortion to the appearance of Div elements

Is there a way to incorporate CSS directly into HTML from a local .css file when setting up a C# project? Is it possible to achieve this using PreMailer.Net?

How to use an if statement in Django when a button is clicked

To enhance the MUI v5 table row, simply apply a border when the mouse hovers

Experiencing discrepancies in pixel height while conducting tests using Nightwatch

Creating a Drop-down Menu Item using React Material UI

Creating unique URLs for websites can be accomplished by following these steps:

Hidden input fields do not get populated by Angular submit prior to submission

Guide on inserting a row into a table class without unique values using jQuery

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

Hover state not responsive on screens of varying sizes due to style inconsistencies

Is it possible to create vertical-floating elements using CSS?

Displaying dynamic HTML content in a Bootstrap modal using React JS is a great

Cause the browser icon to flash in the taskbar when a notification is received

In what way can I fill out my search fields using the criteria included in the URL?