title: Limit print area to a div
body: <p>Is there a way to print only the nested "id=printarea" div (with styling) using only css (not javascript), in IE8 on Windows?</p>
  
  <pre><code>&lt;div id="main"&gt;
      This should NOT be shown in Print Preview
      &lt;div id="printarea"&gt;ONLY this should be shown in Print Preview
      &lt;table&gt;&lt;tr&gt;&lt;th&gt;one&lt;/th&gt;&lt;th&gt;one&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;one&lt;/td&gt;&lt;td&gt;one&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried using css, but it displays nothing (obviously) due to inheritance. The following example shows my intention.</p>
  
  <pre><code>@media print {
      * { display:none; }
      #printarea { display:block; }
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>function printDiv(divId){
      var divToPrint = document.getElementById(divId);
      newWin= window.open();
      newWin.document.write('&lt;style&gt;table,tr,td,th{border-collapse:collapse;border:1px solid black;}&lt;/style&gt;');
      newWin.document.write(divToPrint.innerHTML);
      newWin.document.close();
      newWin.focus();
      newWin.print();
      newWin.close();
  }
  </code></pre>
  
  <p><strong>Example:</strong> <a href="http://jsfiddle.net/D7ZWh/2/" rel="noreferrer">http://jsfiddle.net/D7ZWh/2/</a></p>
  
  <p><strong>Related:</strong>
  <a href="https://stackoverflow.com/questions/18681174/overriding-parents-css-display-property">Overriding parent&#39;s CSS display property</a></p>