Limit print area to a div

html css printing

31,696

Solution 1

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

Solution 2

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.

Solution 3

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.

31,696

Author by

Nick Grealy

Never start a land war in asia! SOreadytohelp

Updated on December 04, 2020

Comments

Nick Grealy over 3 years

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/

arieljuod over 10 years

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
David over 10 years

I think the child selector would work as well. But yes, one or the other would be necessary.
kojow7 almost 5 years

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?