Print a doument with CSS

Introduction

What do we do when we need to print a note? Perhaps you open a new pop up with the same template as your current document, but the pop up has no buttons, images, bars, and other stuff. When you open the new window, you hit the database again (if you have one), which means more steps that you need to do. We'll see how to avoid that in good shape.

Let us suppose that we have the following table:

<table>
  <tr>
    <td>Navigate</td>
    <td>Content</td>
    <td><input type="button" value="ok"></td>
  </tr>
</table>

Now we want to print only the content cell and hide the other ones. I will make a new style CSS for this task:

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

Now I just need to add this class to my controls or table cell (and also row):

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" value="ok" class="noPrint"></td>
  </tr>
</table>

As you can see, you can also add your CSS class into a button. Open this file in your browser. We will see Navigate, Content and the button in there. Now go to PrintPreview in your browser and see what happens. The Content and button are gone (hidden), and we can set the button to print.

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" 
          value="Print" class="noPrint" onclick="window.print();"></td>
  </tr>
</table>

Run your page and click Print. That's all...