Limit print area to a div

Question

Is there a way to print only the nested "id=printarea" div (with styling) using only css (not javascript), in IE8 on Windows?

<div id="main">
    This should NOT be shown in Print Preview
    <div id="printarea">ONLY this should be shown in Print Preview
    <table><tr><th>one</th><th>one</th></tr><tr><td>one</td><td>one</td></tr></table></div>
</div>

I've tried using css, but it displays nothing (obviously) due to inheritance. The following example shows my intention.

@media print {
    * { display:none; }
    #printarea { display:block; }
}

I've successfully used javascript (which works), but I don't consider it an elegant solution, as I'd have to pull in all css imports and style blocks in the document.write.

function printDiv(divId){
    var divToPrint = document.getElementById(divId);
    newWin= window.open();
    newWin.document.write('<style>table,tr,td,th{border-collapse:collapse;border:1px solid black;}</style>');
    newWin.document.write(divToPrint.innerHTML);
    newWin.document.close();
    newWin.focus();
    newWin.print();
    newWin.close();
}

Example: http://jsfiddle.net/D7ZWh/2/

Related: Overriding parent's CSS display property

score 15 · Accepted Answer · edited May 23 '17 at 10:29

15

You will have to put all other content into html elements (note the p tag)

<body>
  <p>This should NOT be shown in Print Preview</p>
  <div id="main">
   <p>This should NOT be shown in Print Preview</p>
   <div id="printarea">ONLY this should be shown in Print Preview</div>
  </div>
</body>

Then you can hide all other elements below a parent. do this for each parent in the hierarchy

@media print {
   body *, #main * { display:none; }
   #main, #main #printarea, #main #printarea * { display:block; }
}

EDIT:

this is very similar to the second answer to printing only one div

edited May 23 '17 at 10:29

Community

1
1

answered Dec 04 '13 at 00:07

actual_kangaroo

5,971
2
31
45

If you are specifying everything in body should be `display:none` why do you also have to specify that everything in #main should also be `display:none`? Wouldn't just specifying `body *` also include `#main`? – kojow7 Sep 26 '19 at 16:51

score 4 · Answer 2 · answered Dec 04 '13 at 00:14

If you can change the markup then obviously the best thing to do is wrap the content you want hidden in its own tag(s) and just hide them. However, if you really want to do this using only CSS and without modifying the DOM, then you can play some tricks with positioning. Try something like this:

@media print {
   #main {position:relative; padding:0; height:1px; overflow:visible;}
   #printarea {position:absolute; width:100%; top:0; padding:0; margin:-1px;}
}

This will basically collapse the #main div, and position the #printarea on top of it so it covers everything. (I added margin:-1px so that it covers #main's border as well). Just make sure that #printarea has a background and you should be good to go.

Try printing the display frame from this fiddle: http://jsfiddle.net/D7ZWh/3/ to see the result.

score 1 · Answer 3 · answered Dec 04 '13 at 00:04

1

The problem with what you want to do I that you're trying to hide the parent, and show the child. If you could wrap that text in a paragraph or span, then you could do something like

#main * {display:none;}
#main #printarea {display:block;}

So, basically you take all of #main's children, and hide them, and then show just print area.

answered Dec 04 '13 at 00:04

David

4,744
5
33
64

I would add a "#media #printarea * {display: block;}" too, because the #main * affects all children, not only direct children and those may be hidden even if #printarea is shown, it could be "#main > * {display: none;}" but I think it's not a crossbrowser solution – arieljuod Dec 04 '13 at 00:52
I think the child selector would work as well. But yes, one or the other would be necessary. – David Dec 04 '13 at 04:25

Limit print area to a div

3 Answers3

Linked