To hide a tag

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 (AT) nospam (DOT) 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/

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 help me with a little sample



Thank you

Paolo vertrouwde ons toe:

"Jukka K. Korpela"
wrote
[snipped]
What? Are you really trying to hide _tags_ and not elements?

It is not the some?
please try to help me with a little sample

Thank you

If you do not know the difference between *tag* and *element*
it is time for you to read up on HTML-mark up.

This is a tag: <td>

This is an element: <td>content</td>

Good luck.

--
Rob

Jukka K. Korpela wrote:

Scripsit Jonathan N. Little:

You cannot do that!

Can't do what? Fullquoting obscures messages.

Firstly, I did *not* full quote, but only quotes his explanation of his
attempt and is "markup". You are very knowledgeable and I value your
very informative, if sometime terse, posts. But sometimes you can
exhibit behavior that indicate that you may need to find a better hobby.

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

Why do you think so?

Removing a random TD from a table without compensating on other rows
almost always buggers the table display across browsers...it is a common
newbie question here with their abuse of row-and-column-span
nested-tabled messes...

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.

No but is usually cause unpredictable display behavior across browsers
as each tries to reconcile the inconsistence, usually unwanted side
effect for the author...

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.

Who really knows, instead of a real URL to a real example of what he is
attempting with get this code snippet.

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.

Don't blame me, I'm not pointing a gun to your head. Anyway the OP
didn't say, used a transitional doctype, and gave a lain code
example...one can probably infer that with his real efforts that he is
witnessing "odd" display result, else why would he post?

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

How knows, can you real deduce what the real application is with nested:

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

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

??

--
Take care,

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

Scripsit Jonathan N. Little:

Firstly, I did *not* full quote,

If fact you did: you quoted verbatim Paolo's entire message, rather
pointlessly. And you keep quoting too much. You're supposed to select
the key sentences only, not just to delete a few lines.

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

Why do you think so?

Removing a random TD from a table without compensating on other rows
almost always buggers the table display across browsers...

No, it just changes the table. If you want to remove a single cell from
a multi-line multi-column table, then it is indeed somewhat odd, but
then the oddity lies in what you are trying to do, not in the
technicalities. And there is nothing in the odd concept that imples that
the table will be "buggered".

it is a
common newbie question here with their abuse of row-and-column-span
nested-tabled messes...

You didn't take a very close look at the markup you quoted verbatim? (It
has nested tables, but in non-confusing manner, and it has no rowspan or
colspan attributes.) Comprehensive quoting _is_ a symptom of lack of
comprehensive reading.

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.

Who really knows,

I do, because I actually looked at the markup you quoted.

instead of a real URL to a real example of what he
is attempting with get this code snippet.

Surely. Surely the OP should state his real problem and throw us the
real URL to get help with the real problem. But if you comment on a
question with some sketchy markup and you quote all of that markup, then
surely you should focus on that markup.

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.

Don't blame me,

I wasn't blaming you in this statement. Nobody said you should have done
the OP's job of setting up a demo page, etc.

one can probably infer that with his real efforts that he is
witnessing "odd" display result, else why would he post?

People post for various reasons. Who knows, maybe he tested on Netscape
3 (which has serious difficulties with nested tables when omissible end
tags are omitted). :-=

How knows, can you real deduce what the real application is with
nested:
table><tr><td>Have a bad day?<td>yes</table

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

??

I can deduce that it is a fairly harmless case of using a layout table,
because I looked at the markup. Of course it remains unknown what the
real application is, but you shouldn't claim that some markup is "weird
example with nested tables" when it's actually a very simple case of a
two-cell table containing a single-column table in each cell.

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

In article <aPSAj.308134$Pv7.33307 (AT) reader1 (DOT) news.saunalahti.fi>,
"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

Scripsit Jonathan N. Little:

Removing a random TD from a table without compensating on other rows
almost always buggers the table display across browsers...

... And there is nothing in the odd concept that imples that
the table will be "buggered".

I was shocked that Jonathan should use this concept without
asking permission from us Australians.

--
dorayme