使用 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