Click here to Skip to main content
13,351,050 members (57,066 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked
Posted 28 Feb 2006

Print a doument with CSS

, 28 Feb 2006
Rate this:
Please Sign up or sign in to vote.
How to hide controls when printing a document.


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:

    <td><input type="button" value="ok"></td>

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 media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }

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

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

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.

    <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>

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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer Softtek GDC Ensenada
Mexico Mexico
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionHow to Print With No Prompt Pin
samitcom28-Sep-06 1:04
membersamitcom28-Sep-06 1:04 
AnswerRe: How to Print With No Prompt Pin
benjarras28-Sep-06 6:51
memberbenjarras28-Sep-06 6:51 
AnswerRe: How to Print With No Prompt Pin
jeyaraman26-Dec-07 19:49
memberjeyaraman26-Dec-07 19:49 
You can use



in body tag. assign

You can assign value in any event by using following code...


General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 28 Feb 2006
Article Copyright 2006 by benjarras
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid