Being a web developer, we all come across the printing dynamic web page in most of web applications. Like print the air ticket, rail ticket, transaction success message etc..
All print functionality requires header to be repeated in every page. Some also requires footer to be repeated in every page. Header mostly consists the company logo and some summary details.
We use table's thead tag which automatically gets repeated when we does the print.
CodePen Code:
see below codepen example which has got long page to print. I have added print button to print the page. I want header to be repeated on each print page. I have put header in thead tag. Switch to css tab see the css and switch to result for result. See the result on full view on http://codepen.io/vipul_patel_08/full/zZxzBw/ it.
Result :
Click on print button on full view page (http://codepen.io/vipul_patel_08/full/zZxzBw/)of result. Check on chrome and safari browser. ohh what is this. In first page header is looking fine but in second page of print header and contents gets overlapped.
This is what issue with chrome and safari. Earlier they were not supporting repeating thead tag. Now they started supporting but in correct way.
Now check same result page in IE and Mozilla. Its just awesome. Header is getting repeated in every page. Its cool !!!. Same for Mozilla. Header gets repeated in each page.
There is no as such solution for this both web-kit browser until they starts supporting properly. To avoid overlapping we can provide nice solution of not repeating header for these both browser. Yeah we can do that. so at least we get for other browser and for chrome/safari browser it wont repeat.I have applied solution. please see on full page result on http://codepen.io/vipul_patel_08/full/BWoGEb/ and do the print. Now header wont get repeated for chrome/safari browser.
by default thead comes with display: table-header-group which repeats the header.
Put below media print for webkit chrome and safari browser and make it not to repeat
This is what issue with chrome and safari. Earlier they were not supporting repeating thead tag. Now they started supporting but in correct way.
Now check same result page in IE and Mozilla. Its just awesome. Header is getting repeated in every page. Its cool !!!. Same for Mozilla. Header gets repeated in each page.
Note - check on desktop browsers only.
Solution for chrome and safari:
There is no as such solution for this both web-kit browser until they starts supporting properly. To avoid overlapping we can provide nice solution of not repeating header for these both browser. Yeah we can do that. so at least we get for other browser and for chrome/safari browser it wont repeat.I have applied solution. please see on full page result on http://codepen.io/vipul_patel_08/full/BWoGEb/ and do the print. Now header wont get repeated for chrome/safari browser.
by default thead comes with display: table-header-group which repeats the header.
Put below media print for webkit chrome and safari browser and make it not to repeat
@media print and (-webkit-min-device-pixel-ratio: 0) {
table thead {
display: table-row-group;
}
}
table thead {
display: table-row-group;
}
}
Conclusion:
Webkit browser does mess with header repeating in print. we can avoid header repeating for that by providing display: table-row-group; instead display: table-header-group. Hope this article will help in future. please post your comment in below section if you like it.
No comments:
Post a Comment