How to hide text with CSS when printing a page

Question

Possible Duplicate:
How do I hide an element when printing a web page?

I would lilke to hide text on a page when the visitor prints.

The text resideds in a

<tr><td>Don't show me</td></tr>

It is not wrapped in a DIV ID, or Class... so I am wondering with CSS can you hide this portion of text... ?? Would you use CSS selectors?

Isn't that same question http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page — RRStoyanov, Jun 13 '11 at 21:50

score 5 · Answer 1 · answered Jun 13 '11 at 21:51

5

Use the @print media type in your css to assign a specific styling (like display: none) to prints only.

answered Jun 13 '11 at 21:51

GolezTrol

Or, you can specify the media type as part of the link or style element. Thus: `` or `` – Will Martin Jun 13 '11 at 21:54
Something like http://webdesign.about.com/cs/css/a/aa042103a.htm – GolezTrol Jun 13 '11 at 21:57

score 0 · Answer 2 · answered Jun 13 '11 at 21:53

You can hide it if you can select it but based on just one line of html it´s impossible to say whether you can just select that table cell.

I think adding something like a no_print class is your safest bet.

Obviously in combination with a print-specific style-sheet.

score 0 · Answer 3 · answered Jun 13 '11 at 21:56

To do this, simply add

    @media print {

   .dontPrint {
       display:none;
    }

    }

Then in the part you dont want to print add class="dontPrint"

So for you, you could just do the following

<tr><td class="dontPrint">Don't show me</td></tr>

Now that part won't print

3 Answers3