Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Handle Page Breaks when Printing a Large HTML Table?
In HTML, when we have to print a table with many rows, there is an issue of keeping the data together when the page ends. When page breaks are not monitored, they can also split a row into two halves and cut the table in an abrupt manner. It can mess up the entire formatting and disrupt the layout. In this tutorial, we will explore the methods for printing the contents of a table with many rows when a page break occurs.
The page-break-inside and page-break-auto
The CSS page-break property can be used to handle page-breaks when we have a table with multiple rows. It is a property that helps to define how elements on a page will appear when printed. This makes the document's print more book-like. Page-break is not a directly usable property, but it contains three properties that can be used as needed.
The page-break-before property specifies whether (and how many) page breaks should be allowed before an element's box. The value of this property is not the only factor in determining whether a page break should follow the element. This decision is also influenced by the value of page-break-after for a preceding element and the value of page-break-inside for any ancestor elements. Following is the syntax –
page-break-before: auto|always|avoid|left|right;
Where,
Auto: Default. Page breaks occur automatically.
Always: Always include a page break before inserting the element.
Avoid: Avoid using a page break before the element (if possible).
Left: Insert a page break before the element to make the next page a left page.
Right: Insert a page break before the element to ensure that the next page is formatted as a right page.
The page-break-after property specifies whether (and how many) page breaks should be allowed after an element's box. The value of this property is not the only factor in determining whether a page break should follow the element.
This decision is also influenced by the value of page-break-before for a following element and the value of page-break-inside for any ancestor elements. Following is the syntax
page-break-after: auto|always|avoid|left|right;
Auto: Default. Page breaks occur automatically.
Always: Always include a page break after inserting the element.
Avoid: Avoid using a page break after the element (if possible).
Left: Insert a page break after the element to make the next page a left page.
Right: Insert a page break after the element to ensure that the next page is formatted as a right page.
The page-break-inside property specifies whether page breaks are permitted within an element's box. The value of this property is not the only factor in determining whether a page break should follow the element.
This decision will also be influenced by the values of page-break-before and page-break-after for any descendant elements. Following is the syntax –
page-break-inside: auto|avoid;
Where,
Auto: Default. Page breaks occur automatically.
Avoid: Avoid using a page break inside the element (if possible).
Example
In this example, we will set the page-break-inside property of the <table> element to "auto" and use the "avoid" value for the <tr> element. We will also add the page-break-after property to the <tr> and then specify the display property with the "table-header-group" and "table-footer-group" values for the <thead> and <tfoot> elements, respectively.
<!DOCTYPE html>
<html>
<head>
<title>How to Handle Page Breaks when Printing a Large HTML Table?</title>
<style>
table {
page-break-inside: auto;
background-color:lightblue;
border:2px solid black;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
td{
border:2px solid navy;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>This is the table header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>This is the table footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<!--several more rows -->
</tbody>
</table>
</body>
</html>
Embedding div tags into <tr> and <td> Table Elements
Basically; we can't break <tr>s or <td> s because they're not block-level elements. So, we embed <div>s into each and apply our page-break rules against the div. Secondly, we add some padding to the top of each of these <div>s to compensate for any styling artifacts.
Example
<style>
@media print {
th div, td div {
margin-top:-10px;
padding-top5px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
1K+ Views
