Page-Break-inside property is not working in chrome

时光毁灭记忆、已成空白 提交于 2019-12-19 17:34:44

问题


I have a long table data, which having many of the rows and nested tables. When I am printing this data then the rows of the table and nested tables are just break on the page break, means tables and data are split into pages, So I use following CSS property there:-

table tr {
 page-break-inside:avoid;
 position:relative;
 }

But this is not working in my case, you can see the live demo here:--http://jsfiddle.net/npsingh/S8vr8/2/show/

Please edit the code by following link:--
http://jsfiddle.net/npsingh/S8vr8/2/
---[For Print the page just press [CTRL+P] or right click and click on Print option]---

I am using Google Chrome Version 29.0.1547.66 m

Please let me know where the problem exactly. Thanks


回答1:


Instead of putting the page-break-inside:avoid; on you table's tr, try applying it on the table directly like this:

table {
    page-break-inside:avoid;
    position:relative;
}

also add this media query:

@media print {
   table {
        page-break-inside:avoid;
        position:relative;
    }
}



回答2:


This did the trick for me it turned out to be the body css:

body{
    height: auto!important;
    float: none!important;
}


来源:https://stackoverflow.com/questions/18860923/page-break-inside-property-is-not-working-in-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!