打印HTML页面时,表格table过长导致分页错行问题
在打印一个html页面时,会出现table数据过长,需要分多个页面打印,这时候会出现一行切成两行,导致表格行错乱。
解决办法
可以在媒体打印中添加下面几行代码
1 2 3 4 5 6 7 8 9 10
| <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> @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>
|
最后会发现表格会根据打印页面的大小进行分行,不会出现一行数据被分成两页的情况了。