前端打印界面分页问题,以及当一个表格数据过多自动分页时,出现断行问题即一行数据被切割在两页纸上

在做一个打印功能时,当一个表格数据过多而不能显示时,浏览器会自动进行分页处理,但是当一页显示不下一个表格时,自动分页会把一行数据暴力的切割显示在两页纸上。问题如下图:
《前端打印界面分页问题,以及当一个表格数据过多自动分页时,出现断行问题即一行数据被切割在两页纸上》
可以使用page-break-inside 属性用于设置是否在指定元素中插入分页符。
有三个参数

描述
auto默认。如果必要则在元素内部插入分页符。
avoid避免在元素内部插入分页符。
inherit规定应该从父元素继承 page-break-inside 属性的设置。

注意: 您不能对绝对定位的元素使用此属性。
注意: 请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

《前端打印界面分页问题,以及当一个表格数据过多自动分页时,出现断行问题即一行数据被切割在两页纸上》

最后效果如下:
《前端打印界面分页问题,以及当一个表格数据过多自动分页时,出现断行问题即一行数据被切割在两页纸上》
参考: 添加链接描述

    原文作者:D浩DzD
    原文地址: https://blog.csdn.net/weixin_40594645/article/details/110088992
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞