Hi at all

I'ld want to hide a tag during display on screen and I want to show the tag
when I print the page.

I try:

<td style="display:none">

or

<div style="display:none">

<td></div>

but the <td> is always displayed and it work also on screen

How can I do please?

Best regards and thank you in advance

On Sat, 08 Mar 2008 09:08:25 GMT, "Paolo" <Paolop@nospam.com> wrote:

>I'ld want to hide a tag during display on screen and I want to show the tag
>when I print the page.

>How can I do please?


Use the classes "print-only" and "no-print" in your HTML and place this
CSS in a stylesheet



..print-only{
display: none;
visibility: hidden;
}

@media print {


.no-print {
display: none;
visibility: hidden;
}

/* Simple standards-based way to turn printing on */
.print-only {
display: inherit;
visibility: visible;
}


/* IE hack, because it doesn't support display: inherit; */
*.print-only {
display: block;
}

tt.print-only, i.print-only, b.print-only, big.print-only,
small.print-only,
em.print-only, strong.print-only, dfn.print-only, code.print-only,
samp.print-only, kbd.print-only, var.print-only, cite.print-only,
abbr.print-only, acronym.print-only,
a.print-only, img.print-only, object.print-only, br.print-only,
map.print-only, q.print-only, sub.print-only, sup.print-only,
span.print-only, bdo.print-only,
input.print-only, select.print-only, textarea.print-only,
label.print-only, button.print-only
{ display: inline; }

img.print-only,
button.print-only, textarea.print-only,
input.print-only, select.print-only
{ display: inline-block; }

li.print-only { display: list-item }

table.print-only { display: table; }
tr.print-only { display: table-row; }
thead.print-only { display: table-header-group; }
tbody.print-only { display: table-row-group; }
tfoot.print-only { display: table-footer-group; }
col.print-only { display: table-column; }
colgroup.print-only { display: table-column-group; }
td, th.print-only { display: table-cell; }
caption.print-only { display: table-caption; }
}

Scripsit Andy Dingley:

> Use the classes "print-only" and "no-print" in your HTML and place
> this CSS in a stylesheet

For a starter, valid markup should be used. The OP's code snippet was
uninformative except for revealing that the markup was grossly invalid.

> .print-only{
> display: none;
> visibility: hidden;
> }

Why set visibility when display: none? To hide something that does not
exist (in rendering)?

And since the request was to hide a "tag" (i.e., element) during display
on screen and to show when the page is printed, one class and and rule
should be enough. For example, class="print-only" for elements that
should appear in print only, with the CSS rule

@media screen { .print-only { display: none; } }

Problem solved? This does means that in rendering modes other than
screen or print, the content would appear, but nothing was said about
such modes in the original posting, and they need to be separately
considered anyway, if relevant.

> /* Simple standards-based way to turn printing on */
> .print-only {
> display: inherit;
> visibility: visible;
> }

Pardon? Apart from being much too complex, this fails to work in many
occasions. There will be great confusion if you make an element inherit
its display value from its parent.

> /* IE hack, because it doesn't support display: inherit; */
> *.print-only {
> display: block;
> }

Getting deeper into trouble, are we not?

> tr.print-only { display: table-row; }

What's the idea of using an "IE hack" that deploys constructs that are
not supported at all by IE?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

"Jukka K. Korpela"

Wrote:

> @media screen { .print-only { display: none; } }
>
> Problem solved?



NO!



I try to apply that you wrote but the result is to hide the content of the
second <td> and not only the <td> tag

I'ld wanted to display my tables into a single column on screen and into two
columns printing the page to have printed one page only.

I wrote here a little sample

If you run it you see ancly the first 4 tables but on screen I want to see
all 8 tables into a single coliumn and printing all tables on 2 colums

Regads



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

@media screen { .print-only { display: none; } }

</style>

</HEAD>

<BODY>

<table><tr><td>

<table><tr><td>Have a bad day?<td>yes</table>

<table><tr><td>Have a bad day?<td>yes</table>

<table><tr><td>Have a bad day?<td>yes</table>

<table><tr><td>Have a bad day?<td>yes</table>

<td class="print-only">

<table><tr><td>Have a bad day?<td>NO</table>

<table><tr><td>Have a bad day?<td>No</table>

<table><tr><td>Have a bad day?<td>No</table>

</table>

</BODY>

</HTML>

Paolo wrote:
> "Jukka K. Korpela"
>
> Wrote:
>
>> @media screen { .print-only { display: none; } }
>>
>> Problem solved?
>
>
>
> NO!
>
>
>
> I try to apply that you wrote but the result is to hide the content of the
> second <td> and not only the <td> tag
>
> I'ld wanted to display my tables into a single column on screen and into two
> columns printing the page to have printed one page only.
>
> I wrote here a little sample
>
> If you run it you see ancly the first 4 tables but on screen I want to see
> all 8 tables into a single coliumn and printing all tables on 2 colums
>
> Regads
>
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>
> <HTML>
>
> <HEAD>
>
> <TITLE> New Document </TITLE>
>
> <style>
>
> @media screen { .print-only { display: none; } }
>
> </style>
>
> </HEAD>
>
> <BODY>
>
> <table><tr><td>
>
> <table><tr><td>Have a bad day?<td>yes</table>
>
> <table><tr><td>Have a bad day?<td>yes</table>
>
> <table><tr><td>Have a bad day?<td>yes</table>
>
> <table><tr><td>Have a bad day?<td>yes</table>
>
> <td class="print-only">
>
> <table><tr><td>Have a bad day?<td>NO</table>
>
> <table><tr><td>Have a bad day?<td>No</table>
>
> <table><tr><td>Have a bad day?<td>No</table>
>
> </table>
>
> </BODY>
>
> </HTML>
>
>

You cannot do that! If you remove a TD (which 'display: none' does )
your table will be buggered! Miss match on the number of TDs per row.
You either have to put a element within the TD which you toggle the
display, or not use tables! From your weird example with nested tables,
it looks like you are using tables improperly anyway.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Scripsit Paolo:

>> @media screen { .print-only { display: none; } }
>>
>> Problem solved?
>
> NO!

You didn't apply the advice properly.

To get more specific information, enter more specific information of
what you tried. This means telling us the URL.

It's generally counter-productive to spot people's errors unless they
show us the URL. Sometimes it is possible, but it will teach them (and
others) bad habits. So is it immoral for me continue before we have the
URL? Maybe, but I feel a bit bad guy today...

> I try to apply that you wrote but the result is to hide the content
> of the second <td> and not only the <td> tag

What? Are you really trying to hide _tags_ and not elements? (The
confusion is common, but it was already correct in this thread. Please
stand corrected until you understand the point.) And what is "the second
<td>" as opposite to "the <td>tag"?

> I'ld wanted to display my tables into a single column on screen and
> into two columns printing the page to have printed one page only.

Sounds strange. I wonder what the real use case is.

> I wrote here a little sample

URL, please.

> <style>

Use valid markup. Moreover, close all table-related elements with
exlplicit end tags to avoid browser bugs.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Scripsit Jonathan N. Little:

> You cannot do that!

Can't do what? Fullquoting obscures messages.

> If you remove a TD (which 'display: none' does )
> your table will be buggered!

Why do you think so?

> Miss match on the number of TDs per row.

And this means... the end of the world as we know it?

Such a mismatch might be bad style, but it does not violate any
specification. It might be unclear how such a table should be rendered,
but table rendering has many other browser-dependencies anyway.

Besides, in this case, the outer table has a single row, and the
structure of the inner tables is irrelevant, since the hiding takes
place at the outer level.

Now that you made me bothered to do the OPs job of setting up a copy of
the markup as an addressable document, it seems to do just what the OP
asked for - on IE 7. Maybe not on other browsers, but this might be due
to the missing end tags, or something.

> You either have to put a element within the TD which you toggle the
> display, or not use tables!

No, there's nothing illogical in the idea of making one column of a
table "hidden" by setting display: none. It might be slightly more
logical to set visibility: collapse, though.

> From your weird example with nested
> tables, it looks like you are using tables improperly anyway.

The example was weird, but my conjecture is that this is a fairly
harmless case of using a layout table. I have no idea why one of the
inner tables should appear in print but not on screen; it's normal to
want just the opposite (to hide a navigation bar in print).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

"Jukka K. Korpela"
wrote



> URL, please.
>

sorry but

I have not put online the page because is php and because it do not wark
still now



>

>What?

>Are you really trying to hide _tags_ and not elements? (The
confusion is common, but it was already correct in this thread. Please
stand corrected until you understand the point.)



What want you tell me with this phrase?



I do not understand fine this



>Are you really trying to hide _tags_ and not elements?



It is not the some?



please try to me with a little sample



Thank you