Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
233 views
in Technique[技术] by (71.8m points)

javascript - How to achieve page break in HTML table for Google Chrome?

I am trying to print a large table generated with jQuery in an HTML page. I am using Chrome 26.0.141. The issue is with page break.

i initially used this css

#membersList table { page-break-inside:auto; position:relative}
#membersList tr { page-break-before:avoid; page-break-after:auto;position:relative}
#membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative}
#membersList thead { display:table-header-group;position:relative }
#membersList tfoot { display:table-footer-group;positioion:relative} 

this dint worked so i searched and got this link Google Chrome Printing Page Breaks

based on one of the answer in that link i am using the following CSS attribute

 -webkit-region-break-inside: avoid;

But when I run and inspect the element, it is stroked out by default.

What would be the solution? There are lot of posts I searched. They say that recent versions don't support page break. If it's true then what other solution is there to achieve page break in Google Chrome?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Finally I resolved this issue. I made tr{display:block;} and then I fixed the cell spacing.

Page break only works on block level elements.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...