Print specific content of body - HTML & CSS

Print specific content of body - HTML & CSS

In this tutorial, you will learn how you can print a specific div or table to the printer using simple CSS styles. CSS print API allows you to specify which content should be sent to the printer.

If you face any problem, feel free to ask us in the comments section. You can follow us on Facebook too:

[MrRrog]

I've been through the entire Internet searching for a way to print a div and you just saved my life. I have no money right now, but here it is a like, comment and a sub. Have a nice day

[arulkn]

Thanks for the video. this worked for me
.print-container {
position: fixed;
/* Fixed position to avoid any inherited layout */
top: 10px;
left: 10px;
margin: 0;
height: 95%;
width: 95%;
padding: 0;
overflow: visible;
}

[amanswami]

bro thanks i am finding this from two days,
this is the easiest way bro thanks again

[asaduzzamandaria]

Thank you very much for your helpful video. I want more custom report and print tutorial video.

[dawoodsherazi]

thanks great video i am searching for it ...you gave me simple and easy solution

[deepakvishwakarma]

Very nice adnan .. exactly what I was looking for .. I never used @media print
Thanks

[brandondlamini]

you are GOLDEN thanks a lot i would like to buy you a coffee sometime

[sridivya]

Can you tell us how to create responsive nav

[mwdttjo]

Is there away to apply this to different sections on the page, so you can print separate areas and not everything all at once?

[apodoapodo.]

Thank you so much, fast and easy. +10

[shubhampote]

I tried the above code but I am getting extra blank pages when printing.
Is there any way to avoid the extra blank pages coming while printing?

[rebeccafyfe]

how would i change the size of the element being printed? as it comes out very small in the printing options

[yeasirarafatzim]

when I am using position: static, it prints all the elements but there are extra margins, when I changed position to absolute, extra margins were removed but it only shows first row of the table, rest of the table is not showing on print screen. How could I solve that problem?

[ManojKumar-frjy]

My Web Application have page with large content. I need to print this into pdf file. In pdf I am unable to print all the pages, can see only one page data is printed. How I can resolve this?

[natimitiku]

how to be able to print a single column which have an image

[mdilman]

hi Adnan, is it possible by using one button as yours to print 2 divs as 2 separate pages? if so could you elaborate how?

[RedzGringo]

Very Useful thank you. But how do i print with the backgroundcolor too?

[b.]

Is there a way to add the css style to the page? Like my title is blue and i want to see the blue title in the print preview

[subhashreemohapatra]

Thanks for this video! Can you please guide me how can I print the object and only table data using angular 7?

[ravidgowda]

size of A4, Portrait is 210 × 297 mm can we able increase the height when we are printing using @media print?