猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

打印大型HTML表时如何处理分页符

打印大型HTML表时如何处理分页符

我有一个项目，它需要打印一个包含许多行的HTML表。

我的问题是表格在多页上的打印方式。它有时会将一行切成两半，这使得它无法读，因为其中一半在页面的边缘，其余的则打印在下一页的顶部。

我能想到的唯一可行的解决方案是使用堆叠的div，而不是表和强制分页(如果需要的话)。但在我经历所有的改变之前，我想我可以在这里问一问。



拉莫斯之舞
浏览 464回答 2
2回答

千万里不及你

<!DOCTYPE&nbsp;HTML><html><head><meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html;&nbsp;charset=UTF-8"><title>Test</title><style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;table&nbsp;{&nbsp;page-break-inside:auto&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;tr&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;page-break-inside:avoid;&nbsp;page-break-after:auto&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;thead&nbsp;{&nbsp;display:table-header-group&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;tfoot&nbsp;{&nbsp;display:table-footer-group&nbsp;}</style></head><body> &nbsp;&nbsp;&nbsp;&nbsp;<table> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<thead> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr><th>heading</th></tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</thead> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tfoot> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr><td>notes</td></tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tfoot> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tbody> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>x</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>x</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;500&nbsp;more&nbsp;rows&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>x</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;</tbody> &nbsp;&nbsp;&nbsp;&nbsp;</table></body></html>
0

慕森王

注意：当使用分页后：总是为标签，它将创建一个分页后的最后一点表，创建一个完全空白页在结束每一次！要解决这个问题，只需将其更改为“分页后：自动”。它将正确中断，而不会创建额外的空白页。<html><head><style>@media&nbsp;print{ &nbsp;&nbsp;table&nbsp;{&nbsp;page-break-after:auto&nbsp;} &nbsp;&nbsp;tr&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;page-break-inside:avoid;&nbsp;page-break-after:auto&nbsp;} &nbsp;&nbsp;td&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;page-break-inside:avoid;&nbsp;page-break-after:auto&nbsp;} &nbsp;&nbsp;thead&nbsp;{&nbsp;display:table-header-group&nbsp;} &nbsp;&nbsp;tfoot&nbsp;{&nbsp;display:table-footer-group&nbsp;}}</style></head><body>....</body></html>
0

慕田峪7331174

从锡南纽尔解决方案扩大：<!DOCTYPE&nbsp;HTML><html><head><meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html;&nbsp;charset=UTF-8"><title>Test</title><style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;table&nbsp;{&nbsp;page-break-inside:auto&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;div&nbsp;&nbsp;&nbsp;{&nbsp;page-break-inside:avoid;&nbsp;}&nbsp;/*&nbsp;This&nbsp;is&nbsp;the&nbsp;key&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;thead&nbsp;{&nbsp;display:table-header-group&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;tfoot&nbsp;{&nbsp;display:table-footer-group&nbsp;}</style></head><body> &nbsp;&nbsp;&nbsp;&nbsp;<table> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<thead> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr><th>heading</th></tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</thead> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tfoot> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr><td>notes</td></tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tfoot> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div>Long<br&nbsp;/>cell<br&nbsp;/>should'nt<br&nbsp;/>be<br&nbsp;/>cut</div></td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div>Long<br&nbsp;/>cell<br&nbsp;/>should'nt<br&nbsp;/>be<br&nbsp;/>cut</div></td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;500&nbsp;more&nbsp;rows&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>x</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;</tbody> &nbsp;&nbsp;&nbsp;&nbsp;</table></body></html>看来page-break-inside:avoid在某些浏览器中，只考虑块元素，而不考虑单元格、表、行和内联块。如果你想display:block这个TR标记，并在那里使用page-break-inside:avoid，它能工作，但会乱搞你的桌子布局。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5