PRINT: How to hide element and include element to print

Question

Element should be hidden in media screen while include it when user want to print the page.

I use this CSS code but not working.

@media screen {
    th .hide {
      display: none;
    }
}

@media print {
    th .hide {
        border: 1px solid #000; 
        padding: 0.5em;
    }
}

html is like this:

<table>   
    <tr>
        <th class="hide" > Office:    
    </tr>
</table>

Could you provide some HTML ? Else you write ";" after padding. It's should be `@media print { th .hide { border:1px solid #000; padding:0.5em; } }` — MaoTseTongue, Jan 20 '16 at 10:18
@Nimesh I believe you understood the problem the wrong way: OP wants to hide elements from screen but print them however. — pistou, Jan 20 '16 at 10:21

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

Here a similar post

The best practice is to use a style sheet specifically for printing, and and set its media attribute to print.

In it, show/hide the elements that you want to be printed on paper.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

edited May 23 '17 at 11:54

Community

1
1

answered Jan 20 '16 at 10:20

Rémy Testa

897
1
11
24

i think you misunderstood the question. I want an element to be hidden in the screen but print it anyway. Else your answer is not to the point. – Wilnar Vincent Jan 21 '16 at 00:01

PRINT: How to hide element and include element to print

1 Answers1