使用 CSS page-break-inside 属性的解决方案
如果我们需要在多页上打印包含多行的 HTML 表格,请查看下面的代码。
为此,我们需要 CSS page-break-inside 属性,它有助于指定文档在打印时的行为方式。
打印大表格时处理分页符的示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>notes</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
在我们的示例中,我们将 <table> 元素的 page-break-inside 属性设置为“auto”,并为 <tr> 元素使用“avoid”值。
此外,我们将 page-break-after 属性添加到 <tr>,然后使用 <thead> 和 <tfoot> 的“table-header-group”和“table-footer-group”值指定显示属性 元素,分别。
日期:2020-06-02 22:15:09 来源:oir作者:oir
