页面打印表格换页问题

打印HTML页面时，表格table过长导致分页错行问题

在打印一个html页面时，会出现table数据过长，需要分多个页面打印，这时候会出现一行切成两行，导致表格行错乱。

解决办法

可以在媒体打印中添加下面几行代码

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

最后会发现表格会根据打印页面的大小进行分行，不会出现一行数据被分成两页的情况了。

原文地址

页面打印表格换页问题相关推荐

html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...
写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好一.引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量 ...
wxpython表格怎么分页_Word表格跨页断行如何排版？Word表格换页脱节怎么办？
使用Word处理表格经常会因为跨页断行而让用户阅读文章很不方便,使用Word文件建立一些合同文件的时候用户也会十分小心的注意表格跨页断行问题,虽说无法避免,往往也只能使用字体大小设置让页数之间的文字更 ...
Web系统页面打印技术实现与分析
1 Web页面打印概述应用WEB化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于WEB的应用,客户端的规则很简单,容易学习,容易维护,容易发布.在WEB系统中,打印的确是个烦人的问 ...
C# PrintDocument 打印表格
1.封装好的辅助类: 1 using System; 2 using System.Data; 3 using System.Drawing; 4 using System.Drawing.Print ...
随心所欲的Web页面打印技术
一.概述对基于B/S架构的应用程序而言,客户端的页面打印一直是比较头疼的问题,简单的做法是:1.使用IE的打印功能:2.使用水晶报表.但以上两种办法,都有很大的局限性,很难实现特殊要求的排版和精 ...
【原创，提供下载】winfrom 打印表格，字符串的封装
以前写打印都是根据打印机的型号,找开发类库.然后在此基础上开发.写的多了自然就想到了封装.这是还是想到了微软,微软封装了PrintDocument的打印类.但这只是在低层对串口的封装. 所以对于应用层 ...
打印表格_Excel表格打印技巧，让你分分钟打印出完美表格！建议收藏！
平时在工作中经常需要帮忙打印一些文件,但有时候打印出来的东西却并不是我们想要的...... 打印出来为什么没有标题? 不可以自己设置打印区域吗? 怎么把内容打印到一页纸上? 等等...... 如果你遇 ...
jqprint 分页打印_JS实现页面打印（整体、局部）
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印现在就轻松实现了页面的打印,但是这种方 ...
vue + elment ui打印表格数据
vue + elment ui打印表格数据主要的原理就是在vue项目中通过调用浏览器自带的打印功能,完成对table数据的打印解决表格错位以及elment ui 双重表头的问题封装一下打印 ...

页面打印表格换页问题

打印HTML页面时，表格table过长导致分页错行问题

解决办法

页面打印表格换页问题相关推荐

最新文章

热门文章