[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