Sometimes, we want to style page breaks when printing a large HTML table with CSS.
In this article, we’ll look at how to style page breaks when printing a large HTML table with CSS.
How to style page breaks when printing a large HTML table with CSS?
To style page breaks when printing a large HTML table with CSS, we use the @media print media query.
For instance, we write
<html>
<head>
<style>
@media print {
table {
page-break-after: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
td {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}
</style>
</head>
<body>
....
</body>
</html>
to set page-break-after to set the page breaks after the table, tr and td elements.
And we set the page-break-inside to set the page break inside the tr and rd elements.
avoid makes the browser avoid page breaks in the element when printing.
Conclusion
To style page breaks when printing a large HTML table with CSS, we use the @media print media query.
