[Javascript] visibility of a table column
Nick Fitzsimons
nick at nickfitz.co.uk
Tue Oct 10 15:22:05 CDT 2006
On 10 Oct 2006, at 21:09, John Deighan wrote:
> I need to set the visibility of an entire column to hidden or
> visible. I was hoping that the following would work:
>
> <table>
> <colgroup>
> <col id="col1">
> ...
> </colgroup>
> ....
> </table>
>
> <button onclick="document.getElementById('col1').style.visibility =
> 'hidden';">
> Hide Column 1
> </button>
>
> However, when I try it, it doesn't work. Is it supposed to? I
> realize that I can set the visibility of all cells in that column,
> but it might be a very large table. I am using Firefox.
>
> Actually, while composing this e-mail, I decided to try this under
> IE 6. It sort of works. It hides the contents of the cells in that
> column. However, it doesn't make the column go away - in fact, the
> column retains its former width, so I assume it's computing that
> width from the data, which is still really there. To be honest,
> this seems like an odd solution, since it's the column's visibility
> that I'm setting, not the content of the column's cells. Does
> anyone know what the behaviour is supposed to be?
>
The CSS property "visibility" doesn't alter the amount of space taken
up by the element to which it is applied: it means "show/don't show
the contents". To hide it completely, use the "display" property,
with the value "none" to hide and "block" (or just "") to show. See
the CSS spec:
visibility <http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility>
display <http://www.w3.org/TR/CSS21/visuren.html#propdef-display>
As to how well this is supported by browsers for table columns, I'm
not sure. As a general rule, lots of things don't work with columns,
because they aren't something explicitly in the markup in the way
rows are surrounded by <tr>; this can make it tricky for a browser to
work out what to do. For example, if a cell had a colspan of 2,
should it be hidden or not? You'll have to experiment with the
browsers you wish to support :-(
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
More information about the Javascript
mailing list