How can I hide a <td> tag using JavaScript or inline CSS?
views:
2596answers:
5what about display:none; will that work? (cross browser etc).
Blankman
2009-05-27 15:58:15
display:none is in my experience what you actually want 95% of the time
annakata
2009-05-27 16:01:47
Visibility hides the element without altering the flow of the document and so should avoid the sort of problems edeverett is worried about.
Simon
2009-05-27 16:12:22
@simon yeah, that probably is the case but I'd still test it heavily in IE, my spider-sense is warning me that it may cause problems. I've had too many bad experiences with IE and tables.
edeverett
2009-05-27 16:24:21
Well, that's good advice for everything - always assume IE will mess it up and you can't go far wrong!
Simon
2009-05-27 17:47:35
+4
A:
What do you expect to happen in it's place? The table can't reflow to fill the space left - this seems like a recipe for buggy browser responses.
Think about hiding the contents of the td, not the td itself.
edeverett
2009-05-27 15:54:03
+4
A:
.hide{
visibility: hidden
}
<td class="hide"/>
Edit- Just for you
The difference between display and visibility is this.
"display": has many properties or values, but the ones you're focused on are "none" and "block". "none" is like a hide value, and "block" is like show. If you use the "none" value you will totally hide what ever html tag you have applied this css style. If you use "block" you will see the html tag and it's content. very simple.
"visibility": has many values, but we want to know more about the "hidden" and "visible" values. "hidden" will work in the same way as the "block" value for display, but this will hide tag and it's content, but it will not hide the phisical space of that tag. For example, if you have a couple of text lines, then and image (picture) and then a table with three columns and two rows with icons and text. Now if you apply the visibility css with the hidden value to the image, the image will disappear but the space the image was using will remaing in it's place, in other words, you will end with a big space (hole) between the text and the table. Now if you use the "visible" value your target tag and it's elements will be visible again.
TStamper
2009-05-27 15:54:44
+1
A:
If you have more than this in javascript consider some javascript library, e.g. jquery which takes away a little speed, but gives you more readable code.
Your question's code via jquery:
$("td").hide();
Of course there are other javascript libraries out there, as this comparison on wikipedia shows.
The MYYN
2009-05-27 15:59:42