打印大型HTML表时如何处理分页符
打印大型HTML表时如何处理分页符
斯蒂芬大帝浏览 352回答 3
3回答
-
千巷猫影
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test</title><style type="text/css"> 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>x</td> </tr> <tr> <td>x</td> </tr> <!-- 500 more rows --> <tr> <td>x</td> </tr> </tbody> </table></body></html> -
杨魅力
注意：当使用分页后：总是为标签，它将创建一个分页后的最后一点表，创建一个完全空白页在结束每一次！要解决这个问题，只需将其更改为“分页后：自动”。它将正确中断，而不会创建额外的空白页。<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> -
扬帆大鱼
从锡南纽尔解决方案扩大：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test</title><style type="text/css"> table { page-break-inside:auto } div { page-break-inside:avoid; } /* This is the key */ 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> <tr> <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> </tr> <tr> <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> </tr> <!-- 500 more rows --> <tr> <td>x</td> </tr> </tbody> </table></body></html>看来page-break-inside:avoid在某些浏览器中，只考虑块元素，而不考虑单元格、表、行和内联块。如果你想display:block这个TR标记，并在那里使用page-break-inside:avoid，它能工作，但会乱搞你的桌子布局。
随时随地看视频慕课网APP
Html/CSS