Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Handle Page Breaks when Printing a Large HTML Table?
When printing HTML tables with many rows, page breaks can split table rows awkwardly, disrupting the layout and making the printed output difficult to read. This tutorial explores CSS properties and techniques to control how large tables break across pages during printing.
Understanding Page Break Properties
CSS provides three page-break properties that control how elements behave when printed across multiple pages. These properties help create professional-looking printed documents by managing where page breaks occur.
page-break-before Property
The page-break-before property controls whether page breaks should occur before an element
page-break-before: auto|always|avoid|left|right;
auto Default. Page breaks occur automatically based on content flow.
always Forces a page break before the element.
avoid Prevents page breaks before the element when possible.
left Forces a page break to ensure the next page is a left page.
right Forces a page break to ensure the next page is a right page.
page-break-after Property
The page-break-after property controls page breaks after an element
page-break-after: auto|always|avoid|left|right;
The values work identically to page-break-before, but apply to the space after the element instead of before it.
page-break-inside Property
The page-break-inside property controls whether page breaks can occur within an element
page-break-inside: auto|avoid;
auto Default. Page breaks can occur inside the element.
avoid Prevents page breaks inside the element when possible.
Method 1: Using CSS Page Break Properties
The most effective approach is to apply page-break-inside: avoid to table rows while allowing the table itself to break naturally. This prevents rows from splitting while maintaining proper table structure.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Break Control for Large Tables</title>
<style>
@media print {
table {
page-break-inside: auto;
width: 100%;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}
table {
background-color: lightblue;
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
th, td {
border: 2px solid navy;
padding: 8px;
text-align: left;
}
th {
background-color: darkblue;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">End of Employee List</td>
</tr>
</tfoot>
<tbody>
<tr><td>001</td><td>John Smith</td><td>Engineering</td></tr>
<tr><td>002</td><td>Jane Doe</td><td>Marketing</td></tr>
<tr><td>003</td><td>Mike Johnson</td><td>Sales</td></tr>
<tr><td>004</td><td>Sarah Wilson</td><td>HR</td></tr>
<tr><td>005</td><td>David Brown</td><td>Finance</td></tr>
</tbody>
</table>
</body>
</html>
This approach ensures that table headers repeat on each printed page and table rows remain intact across page breaks.
Method 2: Using Div Wrappers in Table Cells
Since table rows (<tr>) and table cells (<td>) are not block-level elements, some browsers may not fully respect page-break properties. Wrapping cell content in <div> elements provides better control over page breaks.
CSS for Div Wrapper Method
@media print {
th div, td div {
margin-top: -5px;
padding-top: 8px;
page-break-inside: avoid;
}
table {
page-break-inside: auto;
}
}
Example with JavaScript Wrapper
<!DOCTYPE html>
<html>
<head>
<title>Div Wrapper Method for Page Breaks</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
@media print {
th div, td div {
margin-top: -5px;
padding-top: 8px;
page-break-inside: avoid;
}
table {
page-break-inside: auto;
}
}
table {
width: 100%;
border-collapse: collapse;
background-color: #f0f8ff;
}
th, td {
border: 1px solid #333;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<button onclick="wrapCells()" style="margin-bottom: 10px; padding: 8px;">Prepare for Print</button>
<table id="printTable">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr><td>P001</td><td>Laptop Computer</td><td>$899.99</td></tr>
<tr><td>P002</td><td>Wireless Mouse</td><td>$29.99</td></tr>
<tr><td>P003</td><td>Keyboard</td><td>$59.99</td></tr>
<tr><td>P004</td><td>Monitor</td><td>$299.99</td></tr>
<tr><td>P005</td><td>Tablet</td><td>$399.99</td></tr>
</tbody>
</table>
<script>
function wrapCells() {
$("#printTable tbody th, #printTable tbody td").wrapInner("<div></div>");
alert("Table cells are now wrapped and ready for better printing!");
}
</script>
</body>
</html>
Click "Prepare for Print" to wrap cell contents in divs, then use your browser's print preview to see the improved page break behavior.
Method 3: Modern CSS with break-inside Property
Modern browsers support the newer break-inside property, which provides better control than the legacy page-break-inside property.
Example with Modern CSS
<!DOCTYPE html>
<html>
<head>
<title>Modern CSS Page Break Control</title>
<style>
@media print {
table {
break-inside: auto;
page-break-inside: auto; /* fallback */
}
tr {
break-inside: avoid;
page-break-inside: avoid; /* fallback */
}
thead {
display: table-header-group;
}
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Sales Report - Q4 2023</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Sales Rep</th>
<th>Region</th>
<th>Sales Amount</th>
</tr>
</thead>
<tbody>
<tr><td>October</td><td>Alice Johnson</td><td>North</td><td>$45,000</td></tr>
<tr><td>October</td><td>Bob Smith</td><td>South</td><td>$38,500</td></tr>
<tr><td>November</td><td>Carol Davis</td><td>East</td><td>$52,300</td></tr>
<tr><td>November</td><td>David Wilson</td><td>West</td><td>$41,800</td></tr>
<tr><td>December</td><td>Eva Martinez</td><td>North</td><td>$47,200</td></tr>
<tr><td>December</td><td>Frank Brown</td><td>South</td><td>$39,900</td></tr>
</tbody>
</table>
</body>
</html>
This modern approach uses both the new break-inside property and the legacy page-break-inside as a fallback for older browsers.
5K+ Views
