关于window.print网页分页换页table不断行的处理

最新推荐文章于 2026-04-02 02:43:27 发布

原创最新推荐文章于 2026-04-02 02:43:27 发布 · 2.4k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js

前端的问题专栏收录该内容

3 篇文章

订阅专栏

在打印HTML内容时，遇到长table导致的跨页断行问题，可以通过CSS来解决。可以设置`page-break-before`, `page-break-after`和`page-break-inside`属性，避免表格在分页时被拆分。此外，调整打印样式如边距，确保页面布局的整洁。参考Stack Overflow上的解决方案和相关CSS技巧，可以有效处理这一问题。" 112943213,10536434,Python批量导入CSV到SQLite3数据库,"['Python编程', '数据库操作', '数据导入', 'SQLite', 'CSV']

在打印的时候，如果数据多，div又是一整个，table过长，就会导致断行出现，这个要怎么改呢。

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

JS:

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

原帖子：

https://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table

这样子就不会断行了。

最普遍的方法是定义每个td的高度，或者用插件设置一个分页高度，或者自己加一个判断判断分页高度。

方法二：

假如是一个table过长，这种情况下，直接在css中作用，上一种方法可能存在列宽度不一致的问题，

table tr {
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;
}

这样子改一下就可以出现想要的效果了。

因为css可能同时被共同作用影响，本来能起作用的属性，可能在其他的原因下就受影响了，没能得到想要的效果。

/*td{border-top:0;border-left:0; border:1px solid #000; }*/

/* .table{/* border:1px solid #000 ; */border-collapse:collapse;margin-top:-1px;}*/

修改打印上下边距：