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.