hide HTML div when printing page

Question

I have a XHTML-based page which contains admin information. The admin should be able to print the page, but I would like it to hide their information.

Is there a way to set a print area when printing a page, or is the only viable solution to open up a secondary page without the admin information when clicking on the "print" button?

Thank you!

score 33 · Accepted Answer · answered Aug 31 '12 at 15:22

33

try this:

<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>

<div class="dontprint">I'm only visible on the screen</div>

answered Aug 31 '12 at 15:22

nickel715

2,505
1
23
28

1

But elelmnt dissappear completly also from common browser view. How to make it visible on site but when I want to print this make printer ignore it without redirecting to other site? – arrowman Mar 03 '17 at 10:45

score 12 · Answer 2 · edited Aug 31 '12 at 19:15

12

You can set the CSS for that div to display: none using the following:

@media print {
    div.do-not-print {display: none;}
}

It'll display normally, but when you go to print, it'll use that CSS class.

edited Aug 31 '12 at 19:15

Zoltan Toth

46,981
12
120
134

answered Aug 31 '12 at 15:18

Gary

121
1
2

score 5 · Answer 3 · answered Aug 31 '12 at 15:16

Add print.css to your page in which you hide all the elements that you don't want to be printed

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

the media="print" attribute tells the browser to use specific css file.

In that file you can have

.admindetails{
   display:none;
}

score 4 · Answer 4 · answered Jan 02 '17 at 08:39

Sure, You can add a diffrent stylesheet for printing, See below example

<link href="print.css"  rel="stylesheet" type="text/css" media="print" />

or in exiting stylesheet, you can add media query

@media print {
    .no-print {display: none;}
}

And add .no-print class where you do not want to print HTML element

hide HTML div when printing page

4 Answers4